/* ==========================================================================
   MINT-BTN-V2  premium button system, broker side
   --------------------------------------------------------------------------
   Three moves borrowed from Cloudflare + Brevo, rebuilt on Mint's teal:
     1. a real vertical gradient, light at the top and dark at the foot
     2. an inset 1px top highlight, the thing that makes a button look moulded
     3. a hairline ring plus a brand-tinted contact shadow, not a flat border

   Shades are Cloudflare's own recipe run on Mint's teal, not generic white
   overlays: gradient top = brand + 15% white, highlight = brand + 30% white,
   ring = brand + 10% black, which is already Mint's --brand-hover.

   V2 covers the whole broker vocabulary, not just .btn-primary. Broker pages
   each defined their own button classes inline, so the same control was a
   filled CTA on one page and a tinted pill on another. Every name below is one
   a real broker page actually ships; the list came from scanning all 18 pages.

   NO transform anywhere. A transform on an element makes it a containing block
   for any position:fixed descendant, which is what broke the pagination bar on
   the company page. Depth here is shadow-only and cannot repeat that failure.

   DELIBERATELY NOT TOUCHED, each for a reason:
     .copy-link-btn      half of an input group (border-radius: 0 10px 10px 0,
                         border-left: none). Squaring it into a standalone
                         button would split the joined control.
     .inactivity-btn     display:block; width:100%. A full-bleed modal button,
                         not an inline one.
     .modal-close        a bare glyph, correctly weightless.
     .filter-tab .active .filter-btn .page-btn
                         segmented controls and pagination, a different family.
     .ed-*               the email editor ships its own system.
   ========================================================================== */

:root {
  --mint-btn-brand:        #1f8f88;  /* base */
  --mint-btn-brand-top:    #41a09a;  /* + 15% white, gradient top */
  --mint-btn-brand-edge:   #62b1ac;  /* + 30% white, the 1px highlight */
  --mint-btn-brand-press:  #1a7a74;  /* + 10% black, ring and pressed fill */
  --mint-btn-glow:         rgba(31,143,136,.42);  /* contact shadow, resting */
  --mint-btn-glow-hover:   rgba(31,143,136,.52);  /* contact shadow, hover */
  --mint-btn-focus-ring:   rgba(31,143,136,.14);  /* soft ring on inputs */

  --mint-btn-danger:       #e0524a;
  --mint-btn-danger-top:   #e56c65;
  --mint-btn-danger-edge:  #e98680;
  --mint-btn-danger-press: #ca4a43;

  --mint-btn-line:         #e2e8f0;
  --mint-btn-line-hover:   #cbd5e1;
  --mint-btn-ink:          #334155;
}

/* ==== WHITE-LABEL: the ladder follows the company's colour ===============
   A DM or employee page publishes its company colour on --brand (brand-bg.js
   uses --brand-primary) and then repaints its own buttons with it. The moulding
   above kept Mint's teal regardless, so a maroon company button came out with a
   teal hairline ring and a teal contact shadow sitting behind it. Deriving the
   whole ladder from --brand keeps the moulding and loses the teal. The mix
   percentages are the same recipe as the hand-written values above: top is
   +15% white, edge +30% white, press +10% black. Broker pages publish no
   --brand, so they fall through to the teal defaults, unchanged.
   ========================================================================= */
@supports (background: color-mix(in srgb, red 50%, white)) {
  :root {
    --mint-btn-base:         var(--brand, var(--brand-primary, #1f8f88));
    --mint-btn-brand:        var(--mint-btn-base);
    --mint-btn-brand-top:    color-mix(in srgb, var(--mint-btn-base) 85%, #fff);
    --mint-btn-brand-edge:   color-mix(in srgb, var(--mint-btn-base) 70%, #fff);
    --mint-btn-brand-press:  color-mix(in srgb, var(--mint-btn-base) 90%, #000);
    --mint-btn-glow:         color-mix(in srgb, var(--mint-btn-base) 42%, transparent);
    --mint-btn-glow-hover:   color-mix(in srgb, var(--mint-btn-base) 52%, transparent);
    --mint-btn-focus-ring:   color-mix(in srgb, var(--mint-btn-base) 14%, transparent);
  }
}

/* ==== shared geometry ==================================================== */
body .btn,
body .btn-primary,
body .btn-secondary,
body .btn-outline,
body .btn-danger,
body .btn-ghost,
body .btn-send,
body .btn-cancel,
body .btn-add,
body .btn-confirm,
body .btn-success,
body .btn-disconnect,
body .btn-connect,
body .btn-generate,
body .btn-save-slug,
body .btn-back,
body .btn-upload,
body .btn-forms-library,
body .btn-quick-map,
body .back-btn,
body .controls-add,
body .empty-state-btn,
body .confirm-btn,
body .upload-btn,
body .skip-btn,
body .start-over-btn,
body .fix-issues-btn,
body .text-drops-btn,
body .company-switcher-btn,
body .template-callout-btn,
body .template-use-btn,
body .slug-btn,
body .btn-export,
body .edit-btn,
body .modal-btn-cancel,
body .send-email-cancel,
body .confirm-modal-cancel,
body .wizard-view-btn,
body .login-action-btn,
body .application-button,
body .quick-extend-btn,
body .send-email-submit,
body .modal-btn-save,
body .confirm-modal-confirm,
body .btn-brand,
body .election-add-btn,
body .nh-trigger-btn,
body .locations-empty-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.006em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

/* ==== PRIMARY, the moulded one =========================================== */
body .btn-primary,
body .btn-send,
body .btn-add,
body .btn-confirm,
body .btn-success,
body .btn-connect,
body .btn-generate,
body .btn-save-slug,
body .btn-upload,
body .controls-add,
body .confirm-btn,
body .upload-btn,
body .fix-issues-btn,
body .empty-state-btn,
body .send-email-submit,
body .modal-btn-save,
body .confirm-modal-confirm,
body .btn-brand,
body .election-add-btn,
body .nh-trigger-btn,
body .locations-empty-btn {
  color: #fff;
  background-color: var(--mint-btn-brand);
  background-image: linear-gradient(180deg, var(--mint-btn-brand-top) 0%, var(--mint-btn-brand) 100%);
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),  /* the moulded top edge */
    0 0 0 1px var(--mint-btn-brand-press),       /* hairline ring */
    0 1px 2px rgba(16,24,40,.10),
    0 2px 8px -2px var(--mint-btn-glow);
}
body .btn-primary:hover,
body .btn-send:hover,
body .btn-add:hover,
body .btn-confirm:hover,
body .btn-success:hover,
body .btn-connect:hover,
body .btn-generate:hover,
body .btn-save-slug:hover,
body .btn-upload:hover,
body .controls-add:hover,
body .confirm-btn:hover,
body .upload-btn:hover,
body .fix-issues-btn:hover,
body .empty-state-btn:hover,
body .send-email-submit:hover,
body .modal-btn-save:hover,
body .confirm-modal-confirm:hover,
body .btn-brand:hover,
body .election-add-btn:hover,
body .nh-trigger-btn:hover,
body .locations-empty-btn:hover {
  background-image: linear-gradient(180deg, var(--mint-btn-brand-edge) 0%, var(--mint-btn-brand) 100%);
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10),
    0 6px 18px -4px var(--mint-btn-glow-hover);
}
body .btn-primary:active,
body .btn-send:active,
body .btn-add:active,
body .btn-confirm:active,
body .btn-success:active,
body .btn-connect:active,
body .btn-generate:active,
body .btn-save-slug:active,
body .btn-upload:active,
body .controls-add:active,
body .confirm-btn:active,
body .upload-btn:active,
body .fix-issues-btn:active,
body .empty-state-btn:active,
body .nh-trigger-btn:active,
body .locations-empty-btn:active {
  background-image: none;
  background-color: var(--mint-btn-brand-press);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.24),
    0 0 0 1px var(--mint-btn-brand-press);
}

/* ==== SECONDARY, Brevo's white card ====================================== */
body .btn-secondary,
body .btn-outline,
body .btn-cancel,
body .btn-back,
body .btn-forms-library,
body .back-btn,
body .skip-btn,
body .start-over-btn,
body .text-drops-btn,
body .company-switcher-btn,
body .template-callout-btn,
body .template-use-btn,
body .btn-export,
body .edit-btn,
body .modal-btn-cancel,
body .send-email-cancel,
body .confirm-modal-cancel,
body .wizard-view-btn,
body .login-action-btn,
body .application-button,
body .quick-extend-btn,
body .slug-btn {
  color: var(--mint-btn-ink);
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05);
}
body .btn-secondary:hover,
body .btn-outline:hover,
body .btn-cancel:hover,
body .btn-back:hover,
body .btn-forms-library:hover,
body .back-btn:hover,
body .skip-btn:hover,
body .start-over-btn:hover,
body .text-drops-btn:hover,
body .company-switcher-btn:hover,
body .template-callout-btn:hover,
body .template-use-btn:hover,
body .btn-export:hover,
body .edit-btn:hover,
body .modal-btn-cancel:hover,
body .send-email-cancel:hover,
body .confirm-modal-cancel:hover,
body .wizard-view-btn:hover,
body .login-action-btn:hover,
body .application-button:hover,
body .quick-extend-btn:hover,
body .slug-btn:hover {
  color: #0f172a;
  background-image: linear-gradient(180deg, #fff 0%, #f6f8fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12);
}
body .btn-secondary:active,
body .btn-outline:active,
body .btn-cancel:active,
body .back-btn:active,
body .text-drops-btn:active,
body .company-switcher-btn:active {
  background-image: none;
  background-color: #f1f5f9;
  box-shadow:
    inset 0 2px 3px rgba(16,24,40,.10),
    inset 0 0 0 1px var(--mint-btn-line-hover);
}

/* Brand-inked white button, the way Brevo does it. Used where a white button
   is a real action rather than an escape hatch. */
body .btn-secondary.is-brand,
body .btn-outline.is-brand,
body .text-drops-btn,
body .template-callout-btn,
body .btn-forms-library { color: var(--mint-btn-brand); }
body .btn-secondary.is-brand:hover,
body .btn-outline.is-brand:hover,
body .text-drops-btn:hover,
body .template-callout-btn:hover,
body .btn-forms-library:hover { color: var(--mint-btn-brand-press); }

/* ==== DANGER ============================================================= */
body .btn-danger,
body .btn-disconnect {
  color: #fff;
  background-color: var(--mint-btn-danger);
  background-image: linear-gradient(180deg, var(--mint-btn-danger-top) 0%, var(--mint-btn-danger) 100%);
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-danger-edge),
    0 0 0 1px var(--mint-btn-danger-press),
    0 1px 2px rgba(16,24,40,.10),
    0 2px 8px -2px rgba(224,82,74,.42);
}
body .btn-danger:hover,
body .btn-disconnect:hover {
  background-image: linear-gradient(180deg, var(--mint-btn-danger-edge) 0%, var(--mint-btn-danger) 100%);
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-danger-edge),
    0 0 0 1px var(--mint-btn-danger-press),
    0 1px 2px rgba(16,24,40,.10),
    0 6px 18px -4px rgba(224,82,74,.52);
}
body .btn-danger:active,
body .btn-disconnect:active {
  background-image: none;
  background-color: var(--mint-btn-danger-press);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 0 0 1px var(--mint-btn-danger-press);
}

/* ==== GHOST stays flat on purpose. Not everything should be moulded. ===== */
body .btn-ghost {
  color: #64748b;
  background: transparent;
  box-shadow: none;
}
body .btn-ghost:hover {
  color: #0f172a;
  background: rgba(15,23,42,.05);
  box-shadow: none;
}

/* ==== small: shorter, same moulding, still a legal touch target ========== */
body .btn-sm {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 0.84rem;
  border-radius: 10px;
  gap: 6px;
}

/* ==== icon-only buttons: one quiet square, same family =================== */
body .action-btn,
body .cell-edit-btn,
body .issue-edit-btn,
body .onboard-edit-btn,
body .slug-copy-btn,
body .url-copy-btn,
body .doc-rename-btn,
body .input-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
body .action-btn:hover,
body .cell-edit-btn:hover,
body .issue-edit-btn:hover,
body .onboard-edit-btn:hover,
body .slug-copy-btn:hover,
body .url-copy-btn:hover,
body .doc-rename-btn:hover,
body .input-icon-btn:hover {
  background: #fff;
  color: var(--mint-btn-brand);
  box-shadow:
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 3px rgba(16,24,40,.10);
}

/* ==== icons ride at the text's weight ==================================== */
body .btn i, body .btn-primary i, body .btn-secondary i, body .btn-outline i,
body .btn-danger i, body .back-btn i, body .btn-send i, body .controls-add i,
body .empty-state-btn i, body .text-drops-btn i, body .btn-cancel i {
  font-size: 0.95em; line-height: 1;
}
body .btn svg, body .btn-primary svg, body .btn-secondary svg, body .btn-outline svg,
body .btn-danger svg, body .back-btn svg, body .controls-add svg, body .text-drops-btn svg {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
}

/* ==== focus: one ring for every variant, keyboard only =================== */
body .btn:focus-visible, body .btn-primary:focus-visible, body .btn-secondary:focus-visible,
body .btn-outline:focus-visible, body .btn-danger:focus-visible, body .btn-ghost:focus-visible,
body .back-btn:focus-visible, body .btn-cancel:focus-visible, body .btn-send:focus-visible,
body .controls-add:focus-visible, body .empty-state-btn:focus-visible,
body .text-drops-btn:focus-visible, body .action-btn:focus-visible,
body .view-btn:focus-visible {
  outline: 2px solid var(--mint-btn-brand);
  outline-offset: 2px;
}

/* ==== disabled: flatten. A dead button must not look pressable. ========== */
body .btn:disabled, body .btn-primary:disabled, body .btn-secondary:disabled,
body .btn-outline:disabled, body .btn-danger:disabled, body .btn-send:disabled,
body .controls-add:disabled, body .confirm-btn:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background-color: #f1f5f9;
  background-image: none;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

/* ==========================================================================
   TOOLBAR CONTROLS
   A toolbar only reads as one row when everything in it is the same height.
   Broker toolbars shipped three at once: 32px search, 32px selects, 36px
   buttons. The buttons above are 44px, so the rest come with them.

   Two different .search-box implementations exist and BOTH are kept working:
     companies / enrollments   <i> + <input>, a full-width field
     library / plans           <button class="search-icon"> + <input>, collapsing
   The collapsing pair keeps its border-left:none join; only the size and the
   outer corners change, so the two halves still read as one control.
   ========================================================================== */

/* --- full-field search (companies, enrollments) --- */
body .search-box > i + input {
  height: 44px;
  padding: 0 16px 0 42px;
  border: 0;
  border-radius: 12px;
  font-size: 0.92rem;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .16s ease;
}
body .search-box > i + input:focus {
  box-shadow: inset 0 0 0 1px var(--mint-btn-brand), 0 0 0 3px var(--mint-btn-focus-ring);
}
body .search-box > i { left: 16px; font-size: 15px; }

/* --- collapsing search (library, plans). Borders kept: the icon and the field
       are a joined control and box-shadow rings would double up at the seam. --- */
body .search-box > button.search-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
}
body .search-box.expanded > button.search-icon { border-radius: 12px 0 0 12px; }
body .search-box > button.search-icon + input {
  height: 44px;
  border-radius: 0 12px 12px 0;
  font-size: 0.9rem;
}
body .search-box.expanded > button.search-icon + input { padding: 0 14px; }

/* --- selects and text fields ---
   44px is already this product's stated input height and .form-input/.form-select
   already ship it; everything else had drifted to 32, 36, 40 or 46. These are the
   toolbar and form controls only.

   DELIBERATELY EXCLUDED: .rate-input, .rate-edit-input, .rate-control-select,
   .currency-input and anything inside a rate grid. Those are inline cell editors
   in dense tables where a 44px control would break the row rhythm. */
body .filter-select,
body .plans-filter-select,
body .form-select,
body .manual-plan-select,
body .match-select {
  height: 44px;
  padding: 0 36px 0 16px;
  border: 0;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mint-btn-ink);
  background-position: right 13px center;
  background-size: 14px;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .16s ease;
}
body .filter-select:hover,
body .plans-filter-select:hover,
body .form-select:hover,
body .manual-plan-select:hover,
body .match-select:hover {
  box-shadow: inset 0 0 0 1px var(--mint-btn-line-hover), 0 1px 2px rgba(16,24,40,.06);
}
body .filter-select:focus,
body .plans-filter-select:focus,
body .form-select:focus,
body .manual-plan-select:focus,
body .match-select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mint-btn-brand), 0 0 0 3px var(--mint-btn-focus-ring);
}

/* A .filter-select inside a .filter-group is HALF OF A JOINED CONTROL: the
   group owns the border, the corners and the clipping, and the select is
   deliberately borderless. Giving the select its own ring and radius draws a
   box inside a box, which is what made the Status filter look broken. The
   group takes the treatment; the select goes back to being flat. */
body .filter-group {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .16s ease;
}
body .filter-group:hover { box-shadow: inset 0 0 0 1px var(--mint-btn-line-hover), 0 1px 2px rgba(16,24,40,.06); }
body .filter-group:focus-within { box-shadow: inset 0 0 0 1px var(--mint-btn-brand), 0 0 0 3px var(--mint-btn-focus-ring); }
body .filter-group .filter-label {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #f8fafc;
  border-right: 1px solid var(--mint-btn-line);
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}
body .filter-group .filter-select,
body .filter-group .cdrop-trigger {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background-color: #fff;
}
body .filter-group .filter-select:hover,
body .filter-group .filter-select:focus,
body .filter-group .cdrop-trigger:hover,
body .filter-group .cdrop-trigger:focus { box-shadow: none; outline: none; }

/* Text fields already sized at 44px: give them the same corner and ring so a
   field and a button sitting side by side read as one family. */
body .form-input,
body .field-input,
body .search-input,
body .slug-input {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font-size: 0.92rem;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .16s ease;
}
body .form-input:focus,
body .field-input:focus,
body .search-input:focus,
body .slug-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mint-btn-brand), 0 0 0 3px var(--mint-btn-focus-ring);
}
body textarea.form-input { min-height: 88px; padding: 12px 16px; }

/* --- small icon buttons that had drifted to 28-32px --- */
body .doc-action-btn,
body .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
body .doc-action-btn:hover,
body .modal-close:hover { background: rgba(15,23,42,.06); }

/* --- view toggle. Companies shipped bare icons and library a tracked pair;
       both become the tracked pair, which is the one that reads as a control. --- */
body .view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 3px;
  border-radius: 12px;
  background: #f1f5f9;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.04);
}
body .view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body .view-btn:hover { color: #334155; }
body .view-btn.active {
  background: #fff;
  color: var(--mint-btn-brand);
  box-shadow: 0 1px 2px rgba(16,24,40,.10), inset 0 0 0 1px rgba(16,24,40,.04);
}

/* --- segmented filter tabs (enrollments) --- */
body .filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 0.88rem;
}

/* ==========================================================================
   ROW AND CARD ACTION BUTTONS
   These are icon-first controls that live inside table rows and card headers.
   They must NOT become filled slabs: a destructive action in a row is a red
   GLYPH, not a red button. A row with a filled button in it stops reading as
   a row. Colour carries the meaning here, weight does not.
   ========================================================================== */
body .location-action-btn,
body .selection-action-btn,
body .plans-action-btn,
body .nh-card-action-btn,
body .cobra-action-btn,
body .pv-col-action,
body .btn-icon,
body .delete-icon-btn,
body .dm-list-remove,
body .tag-remove,
body .nh-upload-preview-remove,
body .template-item-btn,
body .plan-doc-file-btn,
body .send-email-close,
body .election-modal-close,
body .ci-face-remove,
body .login-field-btn,
body .dp-nav,
body .profile-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  background-image: none;
  color: #64748b;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
body .location-action-btn:hover,
body .selection-action-btn:hover,
body .plans-action-btn:hover,
body .nh-card-action-btn:hover,
body .cobra-action-btn:hover,
body .pv-col-action:hover,
body .btn-icon:hover,
body .delete-icon-btn:hover,
body .dm-list-remove:hover,
body .tag-remove:hover,
body .nh-upload-preview-remove:hover,
body .template-item-btn:hover,
body .plan-doc-file-btn:hover,
body .send-email-close:hover,
body .election-modal-close:hover,
body .ci-face-remove:hover,
body .login-field-btn:hover,
body .dp-nav:hover,
body .profile-edit-btn:hover {
  background: rgba(15,23,42,.06);
  color: #0f172a;
  box-shadow: none;
}
body .location-action-btn:disabled,
body .plans-action-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: transparent;
}

/* destructive: a red glyph that warms on hover, never a fill */
body .location-action-btn.delete,
body .selection-action-btn.danger,
body .nh-card-action-btn.delete,
body .cobra-action-btn.delete,
body .plans-action-btn.delete,
body .btn-icon.danger,
body .btn-icon-danger,
body .delete-icon-btn,
body .dm-list-remove,
body .tag-remove,
body .nh-upload-preview-remove,
body .template-item-btn.delete,
body .plan-doc-file-btn.danger,
body .doc-dropdown-item.danger {
  color: #dc4a42;
  background: transparent;
  background-image: none;
  box-shadow: none;
}
body .location-action-btn.delete:hover,
body .selection-action-btn.danger:hover,
body .nh-card-action-btn.delete:hover,
body .cobra-action-btn.delete:hover,
body .plans-action-btn.delete:hover,
body .btn-icon.danger:hover,
body .btn-icon-danger:hover,
body .delete-icon-btn:hover,
body .dm-list-remove:hover,
body .tag-remove:hover,
body .nh-upload-preview-remove:hover,
body .template-item-btn.delete:hover,
body .plan-doc-file-btn.danger:hover,
body .doc-dropdown-item.danger:hover {
  color: #b91c1c;
  background: rgba(220,74,66,.10);
  box-shadow: none;
}

/* affirmative accents stay glyph-weight too */
body .plans-action-btn.primary,
body .selection-action-btn.primary,
body .cobra-action-btn.send,
body .nh-card-action-btn.primary { color: var(--mint-btn-brand); background-image: none; }
body .plans-action-btn.primary:hover,
body .selection-action-btn.primary:hover,
body .cobra-action-btn.send:hover,
body .nh-card-action-btn.primary:hover {
  color: var(--mint-btn-brand-press);
  background: rgba(31,143,136,.10);
}

/* Card-header Edit / Manage: a real button, sized for a header rather than a
   page toolbar, so it does not shout over the card title. */
body .profile-edit-btn {
  height: 36px;
  padding: 0 14px;
  color: var(--mint-btn-ink);
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05);
}
body .profile-edit-btn:hover {
  color: #0f172a;
  background: linear-gradient(180deg, #fff 0%, #f6f8fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12);
}

/* ==========================================================================
   INLINE-STYLED CONTROLS
   24% of the controls on these pages (510 of 2163; 280 on company.html alone)
   carry their whole appearance in a style="" attribute written into a JS
   template string. No ordinary rule can reach those, because an inline
   declaration outranks every selector. Author-!important is the one lever the
   cascade provides: it ranks above author-normal, inline included.

   The match is [style*="border-radius"]. An element that pins its own radius
   inline is trying to look like a control, which is exactly the set we want;
   anything without one is left alone.

   COLOUR IS DELIBERATELY NOT OVERRIDDEN. These buttons carry meaning in their
   inline colour (teal confirm, red destructive, grey neutral) and flattening
   that would destroy information. Instead the gradient is applied as
   background-IMAGE over whatever background-COLOR is already inline, so the
   moulding lands on any colour without knowing what it is.
   ========================================================================== */
body button[style*="border-radius"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]):not([class*="mint-icon"]),
body label[style*="inline-flex"][style*="border-radius"],
body a[style*="inline-flex"][style*="border-radius"],
body a[style*="inline-block"][style*="border-radius"] {
  min-height: 44px !important;
  padding: 11px 18px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  background-image: linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,0) 52%,
      rgba(0,0,0,.07) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(16,24,40,.10),
    0 2px 7px -2px rgba(16,24,40,.18) !important;
  transition: box-shadow .16s ease, background-color .16s ease !important;
}
/* NO filter HERE. `filter` creates a stacking context, so on hover the button
   became one and trapped its own [data-tooltip]::before inside it. That pseudo
   carries z-index 99999 specifically to clear `.table-container thead`, which
   is position:relative z-index:10 and opaque; once trapped, it lost to the
   header and the tooltip appeared sliced off at the header's bottom edge.
   It only ever broke on hover, which is exactly when a tooltip is shown.
   Depth on hover comes from the shadow alone. */
body button[style*="border-radius"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]):not([class*="mint-icon"]):hover,
body label[style*="inline-flex"][style*="border-radius"]:hover,
body a[style*="inline-flex"][style*="border-radius"]:hover,
body a[style*="inline-block"][style*="border-radius"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(16,24,40,.10),
    0 6px 16px -4px rgba(16,24,40,.26) !important;
}

/* Inside a table row the compact tier applies: a 44px control in a data row
   breaks the row rhythm. */
body td button[style*="border-radius"]:not([class*="mint-icon"]),
body tr button[style*="border-radius"]:not([class*="mint-icon"]) {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 9px !important;
  font-size: 0.82rem !important;
}

/* Inline-styled fields and selects: geometry only, so a field sitting beside a
   button lines up with it. */
body input[style*="border-radius"]:not([type="checkbox"]):not([type="radio"]),
body select[style*="border-radius"] {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04);
}
body td input[style*="border-radius"],
body tr input[style*="border-radius"] {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 9px !important;
}

/* ==========================================================================
   TABLE SHELL
   Every table on these pages was built separately: .table-container > bare
   <table> (job classes, employees), .plans-table, .docs-table, .data-table.
   They disagreed on border, radius, header colour and row padding, which is
   why no two tabs looked related. One shell for all of them.

   THE BROKEN CORNERS. .table-container was written with border-radius:12px +
   overflow:hidden, which clips the header's square background to the rounded
   corner. Further down the file the column-filter feature needs its dropdowns
   to escape the container, so it re-declares .table-container with
   overflow:visible !important. That silently disabled the clipping, leaving
   the header painted over the corner: the gap people see at the top corners.
   Rounding the HEADER CELLS themselves gives the same corner without any
   clipping, so the dropdowns still escape. overflow is left alone.
   ========================================================================== */
body .table-container {
  background: #fff;
  border: 1px solid var(--mint-btn-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
body .table-container thead tr:first-child th:first-child { border-top-left-radius: 13px; }
body .table-container thead tr:first-child th:last-child  { border-top-right-radius: 13px; }
body .table-container tbody tr:last-child td:first-child  { border-bottom-left-radius: 13px; }
body .table-container tbody tr:last-child td:last-child   { border-bottom-right-radius: 13px; }

/* Tables that carry their own border instead of sitting in a container.
   border-collapse:collapse silently discards border-radius on a table box,
   which is why .plans-table declared a radius and a border and rendered
   neither. separate + zero spacing restores both; the cell borders are
   bottom-only already, so nothing doubles up. */
   .docs-table is NOT in this list. It sits inside .docs-section, which already
   is the panel (background #fff, 1px border, 10px radius) with a zero-padding
   body so the table lies flush against it. Giving the table its own border and
   radius drew a second outline inside the first: with an empty table that is
   just a header row, so it rendered as a floating rounded pill inside the
   panel. .plans-table is the opposite case: it is bare on the page with no
   container, so it must carry its own. */
body .plans-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff;
  border: 1px solid var(--mint-btn-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
/* The documents panel. Its markup carries style="border: none" inline, which
   is why Company Documents reads as a floating white block while every other
   table in the product has an outline. Inline needs !important to undo.
   Corners are rounded on the header rather than with overflow:hidden, because
   the Generate dropdown has to escape the panel (the page already forces
   .docs-section-body { overflow: visible !important } for that reason). */
body .docs-section {
  border: 1px solid var(--mint-btn-line) !important;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
body .docs-section .docs-section-header {
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

/* Flush inside that panel: no border, no radius, no shadow of its own. */
body .docs-section .docs-table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* One header treatment everywhere. */
body .table-container thead th,
body .plans-table thead th,
body .docs-table thead th,
body .data-table thead th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 13px 16px;
  border-bottom: 1px solid var(--mint-btn-line);
  white-space: nowrap;
}
/* One row treatment everywhere. */
body .table-container tbody td,
body .plans-table tbody td,
body .docs-table tbody td,
body .data-table tbody td {
  padding: 13px 16px;
  font-size: 0.9rem;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
}
body .table-container tbody tr:last-child td,
body .plans-table tbody tr:last-child td,
body .docs-table tbody tr:last-child td,
body .data-table tbody tr:last-child td { border-bottom: none; }

body .table-container tbody tr:hover td,
body .plans-table tbody tr:hover td,
body .docs-table tbody tr:hover td { background: #fafbfc; }

/* ==========================================================================
   TABLE ROW ACTIONS
   A row is not a toolbar. A full 44px moulded button inside a data row
   destroys the row rhythm and makes the table read as a stack of cards.
   Icon-only actions stay icons, just bigger and easier to hit; only an action
   that carries a word (Enroll) keeps button chrome, and even then compact.
   ========================================================================== */
   SCOPED TO tbody ONLY. A header cell also contains buttons: the column-filter
   control lives in <thead> and is a button with a single icon child. An earlier
   version of this block matched `tr button`, which caught those too and drew a
   white box around every column title. Only body rows get row-action styling.

   SIZES ARE NEAR-ORIGINAL ON PURPOSE. The actions column is sized by the page
   to fit 32px controls. Growing them to 36px each pushed the Enroll button past
   the table's right edge and clipped its label, so the box grows by 2px and the
   glyph does the rest of the work. */
   THE BOX IS NOT TOUCHED. The actions column is sized by the page around 32px
   controls. Growing the box, the font-size, or adding white-space:nowrap all
   make the cell demand more width than the column has, and the Enroll label
   gets clipped at the table edge. Only the glyph grows, which is what actually
   makes these readable: they were 13px inside a 32px box. Inline font-size on
   the <i> is why this still needs !important. */
body tbody td button i,
body tbody td button svg { font-size: 16px !important; }

/* Square icon-only actions.
   DO NOT use :has(> i:only-child) to detect these. :only-child counts ELEMENT
   children and ignores text nodes, so in `<button><i></i> Enroll</button>` the
   <i> still qualifies as the only child. Enroll therefore matched the icon-only
   rule, lost its gradient and took a grey hover fill, and its white label
   disappeared into it.
   The page gives genuine icon-only actions an explicit inline width (32px
   square) and gives labelled actions padding instead, so the inline width is
   the reliable discriminator. */
body tbody td button[style*="width"] {
  border-radius: 9px !important;
}
body tbody td button[style*="width"] i { font-size: 17px !important; }
body tbody td button[style*="width"]:hover { background-color: #f1f5f9 !important; }

/* Header cells must never pick up button chrome. */
body thead th button {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
}
body thead th button {
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
}
body thead th button i { font-size: 11px !important; opacity: .6; }

/* ==========================================================================
   TAB SWITCHER
   Keeps Mint's own metaphor, a recessed track with a chip resting in it. That
   is deliberately NOT the folder-tab pattern, where the active tab is notched
   into the rule below it.

   What was missing was that nothing was actually recessed or resting: the
   track was a flat fill and the active chip carried box-shadow:none, so five
   choices still read as five flat words on a tint.

   The fix uses the same moulding recipe as the buttons, so the switcher and
   the CTA next to it are visibly the same material:
     the well   an inset shadow on its TOP inner edge, because light comes
                from above and that is where a real recess darkens
     the chip   an inset top highlight, a hairline ring, a contact shadow and
                a brand-tinted lift, which is what makes it sit ON the track
                rather than be painted into it

   These override rules that already carry !important, so they need it too;
   this file is linked last in <head>, so equal specificity resolves here.
   ========================================================================== */
body .tabs,
body .plans-tabs,
body .filter-tabs,
body .header-tabs,
body .company-tabs,
body .main-tabs,
body .plan-tabs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 1px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}
body .tabs::-webkit-scrollbar,
body .plans-tabs::-webkit-scrollbar,
body .filter-tabs::-webkit-scrollbar,
body .header-tabs::-webkit-scrollbar,
body .company-tabs::-webkit-scrollbar,
body .main-tabs::-webkit-scrollbar,
body .plan-tabs::-webkit-scrollbar { display: none !important; }

body .tabs > .tab,
body .plans-tabs > .plans-tab,
body .filter-tabs > .filter-tab,
body .header-tabs > .header-tab,
body .company-tabs > .company-tab,
body .main-tabs > .main-tab,
body .plan-tabs > .plan-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 13px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.004em !important;
  color: #3d605c !important;
  transition: background-color .16s cubic-bezier(.16,1,.3,1),
              color .16s cubic-bezier(.16,1,.3,1),
              box-shadow .16s cubic-bezier(.16,1,.3,1) !important;
}

body .tabs > .tab:hover,
body .plans-tabs > .plans-tab:hover,
body .filter-tabs > .filter-tab:hover,
body .header-tabs > .header-tab:hover,
body .company-tabs > .company-tab:hover,
body .main-tabs > .main-tab:hover,
body .plan-tabs > .plan-tab:hover {
  color: #12302e !important;
  background: rgba(255, 255, 255, .5) !important;
}

/* The only filled thing in the row. It reads as raised because of the same
   four layers a secondary button uses, so the switcher and the buttons on
   the same screen are visibly one material. */
body .tabs > .tab.active,
body .plans-tabs > .plans-tab.active,
body .filter-tabs > .filter-tab.active,
body .header-tabs > .header-tab.active,
body .company-tabs > .company-tab.active,
body .main-tabs > .main-tab.active,
body .plan-tabs > .plan-tab.active {
  background: #ffffff !important;
  color: #125853 !important;
  font-weight: 650 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(18,88,83,.09),
    0 1px 2px rgba(16,24,40,.10),
    0 3px 8px -2px rgba(18,88,83,.22) !important;
}
body .tabs > .tab.active:hover,
body .plans-tabs > .plans-tab.active:hover,
body .filter-tabs > .filter-tab.active:hover,
body .header-tabs > .header-tab.active:hover,
body .company-tabs > .company-tab.active:hover,
body .main-tabs > .main-tab.active:hover,
body .plan-tabs > .plan-tab.active:hover { background: #ffffff !important; }

/* ==== COMPANY TABS: joined to the content ====
   The main tab bar is the LAST thing inside .company-header, whose padding is
   `28px 0 0` with nothing at the bottom. So the band's bottom edge is exactly
   the bottom of this row, which is why a floating chip had its shadow sliced
   off there.

   Rather than fight that edge, use it. The active tab is filled with #f8fafc,
   the page ground that starts immediately below the band, and carries hairlines
   on its top and sides but DELIBERATELY NONE ON THE BOTTOM. It reads as the
   content surface rising through the band: a real tab, open into its panel.

   This is not the folder-tab pattern it resembles. There is no outlined tab
   sharing a border with a rule under the row; there is no rule at all. The
   join is done with fill, which is why it stays soft.

   Only .company-tabs gets this. The other switcher families are inline
   controls with no band under them, so they keep the floating chip above. */
body .company-tabs {
  align-items: flex-end !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;   /* flush: the row IS the band edge */
  padding-bottom: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow-y: hidden !important;
}
body .company-tabs > .company-tab {
  height: 40px !important;
  padding: 0 11px !important;
  border-radius: 10px 10px 0 0 !important;
}
body .company-tabs > .company-tab:hover {
  background: rgba(255, 255, 255, .45) !important;
}
body .company-tabs > .company-tab.active,
body .company-tabs > .company-tab.active:hover {
  height: 44px !important;
  background: #f8fafc !important;
  color: #125853 !important;
  font-weight: 650 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}

/* The row aligns to the band edge, so the gear needs lifting off it or it
   would look like a tab that failed to open. */
body .company-tabs-row { align-items: flex-end !important; }

/* ==== EMPLOYEE TABS: joined to the content ====
   The employee page uses .main-tabs, a different class from the company
   page's .company-tabs, so it never picked up the joined treatment and its
   active tab stayed a chip floating on the band with no way to settle.

   The fill differs too. Under .company-tabs the page ground is #f8fafc.
   Under .main-tabs the next element is .subtab-bar, which paints
   var(--bg-page) = #f9fafb. A tab joins whatever is actually beneath it, so
   this one is filled to match the subtab bar, not the company page ground. */
body .main-tabs {
  align-items: flex-end !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow-y: hidden !important;
}
body .main-tabs > .main-tab {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px 10px 0 0 !important;
}
body .main-tabs > .main-tab:hover {
  background: rgba(255, 255, 255, .45) !important;
}
body .main-tabs > .main-tab.active,
body .main-tabs > .main-tab.active:hover {
  height: 44px !important;
  background: #f9fafb !important;
  color: #125853 !important;
  font-weight: 650 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}
body .company-tab--settings { margin-bottom: 6px !important; }  /* clearly a floating control, not a tab that failed to open; 38 + 6 = 44 keeps the row height */

/* The gear sits outside the row, so it is a chip in its own right. */
body .company-tab--settings {
  height: 38px !important;
  width: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 0 0 1px rgba(18,88,83,.08) !important;
  transition: background-color .16s ease, box-shadow .16s ease !important;
}
body .company-tab--settings.active,
body .company-tab--settings:hover {
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(18,88,83,.10),
    0 1px 2px rgba(16,24,40,.10),
    0 3px 8px -2px rgba(18,88,83,.22) !important;
}
body .company-tabs > .company-tab:focus-visible,
body .tabs > .tab:focus-visible,
body .main-tabs > .main-tab:focus-visible {
  outline: 2px solid var(--mint-btn-brand) !important;
  outline-offset: -2px !important;
}

/* ==========================================================================
   EMPLOYEE PAGE HEADER ACTIONS
   The pair is <a class="btn-back"> plus <button class="btn-header secondary">.
   .btn-back was already in the button system at 44px and .btn-header was not,
   so the two could never line up however they were tweaked.
   ========================================================================== */
body .btn-header {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
body .btn-header.secondary {
  color: var(--mint-btn-ink);
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05);
}
body .btn-header i { font-size: 16px !important; }

/* A destructive action in a page header keeps button weight, unlike one in a
   table row, because here it is a page-level action rather than one of many
   repeated per row. It signals in colour on approach, not at rest. */
body .btn-header.secondary:hover {
  color: #dc4a42 !important;
  background-color: #fff6f5 !important;
  background-image: none !important;
  box-shadow:
    inset 0 0 0 1px #f2c6c2,
    0 2px 7px -2px rgba(220,74,66,.28) !important;
}

/* The company's own mark inside the back link, so the destination is
   recognisable before the word is read. */
body .btn-back .back-logo {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16,24,40,.09);
}

/* ==========================================================================
   PANEL TRANSITIONS
   A tab swap is a display change, which has no start frame, so this is a
   keyframe and not a transition. Enter only: animating the outgoing panel
   makes every switch feel slower than it is.

   OPACITY ONLY. NEVER add a transform here, however small. #tab-employees
   contains .pagination-bar, which is position:fixed to the viewport, and ANY
   transform on an ancestor makes that ancestor the containing block for its
   fixed descendants. With fill-mode:both the transform never stops applying,
   so a 6px lift permanently re-anchors the pagination bar inside the panel
   and it renders as a cut-off card instead of a bottom bar. That is a bug
   this product has already shipped once.

   fill-mode is `both` over a base that never sets opacity:0, so a stylesheet
   that fails to load or a browser that ignores the keyframe still lands on
   visible content rather than an invisible panel.
   ========================================================================== */
@keyframes mint-panel-in { from { opacity: 0; } to { opacity: 1; } }

body .tab-content.active,
body .subtab-content.active,
body .docs-tab-content.active,
body .sig-tab-content.active,
body .rate-tab-content.active,
body .fa-tab-content.active {
  animation: mint-panel-in 200ms cubic-bezier(.16, 1, .3, 1) both;
}

/* ==========================================================================
   SKELETONS
   The reading area never goes blank and never shows a bare "Loading...".
   A skeleton carries the SHAPE of what is coming so the page does not jump
   when the real content lands. These are the primitives; a page builds its
   own arrangement from them so the placeholder sits exactly where the real
   element will.
   ========================================================================== */
body .skeleton {
  position: relative;
  overflow: hidden;
  background-color: #eef1f4;
  border-radius: 7px;
}
/* The sheen is on a pseudo-element, never on the skeleton box itself: a
   transform on the box would make it a containing block, same trap as above. */
body .skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(31,143,136,.10) 60%,
    rgba(255,255,255,0) 100%);
  animation: mint-sheen 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes mint-sheen { to { transform: translateX(100%); } }

body .sk-line { height: 11px; }
body .sk-line.sk-sm { height: 9px; }
body .sk-line.sk-lg { height: 15px; }
body .sk-pill { height: 22px; border-radius: 999px; }
body .sk-avatar { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; }
body .sk-stack { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body .sk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
}
body .sk-row:last-child { border-bottom: none; }
body .sk-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid var(--mint-btn-line);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
}

/* ==========================================================================
   EMAILS TAB, EMBEDDED
   The company page's Emails tab is an <iframe> of /broker/emails?embed=1. It
   is a separate document with its own 116KB stylesheet rendered inside the
   company shell, which is the actual reason it reads as another product
   rather than another page. emails-page.js sets body.em-embed in that mode,
   so these rules apply ONLY inside the frame; the standalone /broker/emails
   page is untouched.
   ========================================================================== */

/* The company page's reading area is a light ground with white cards on it.
   The frame was painting #f8fafc, close enough to white that nothing inside
   read as a card. */
body.em-embed { background: #f8fafc; }

/* The toggle strip spanned the full width with a hard bottom rule, so it read
   as browser chrome bolted above the content rather than part of the page.
   It becomes a card in the same language as every other panel. */
body.em-embed .em-embed-bar {
  margin: 18px 24px 0;
  padding: 13px 18px;
  background: #fff;
  border: 1px solid var(--mint-btn-line);
  border-bottom: 1px solid var(--mint-btn-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* The sub-tab bar sat in its own tinted strip with a full-bleed rule. Every
   other sub-tab bar in the product sits on the page ground. */
body.em-embed .docs-subtab-bar {
  background: transparent;
  border-bottom: 1px solid var(--mint-btn-line);
}
body.em-embed .docs-subtab-bar-inner { padding: 0 24px; }

/* Match the company page's content rhythm so the frame does not read as a
   differently-padded document sitting inside another one. */
body.em-embed .content { padding: 18px 24px 26px; }

@media (prefers-reduced-motion: reduce) {
  body .tab-content.active,
  body .subtab-content.active,
  body .docs-tab-content.active,
  body .sig-tab-content.active,
  body .rate-tab-content.active,
  body .fa-tab-content.active { animation: none !important; }
  body .skeleton::after { animation: none; opacity: 0; }
}
@media print {
  body .skeleton { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body .btn, body .btn-primary, body .btn-secondary, body .btn-outline,
  body .btn-danger, body .btn-ghost, body .back-btn, body .btn-cancel,
  body .btn-send, body .action-btn, body .controls-add, body .empty-state-btn,
  body .text-drops-btn, body .view-btn { transition: none; }
}

/* ==== GLIDER OPT-OUT for the two joined tracks ====
   MINT-MOTION-V1 gives page-level tab tracks a .mint-glider: one absolutely
   positioned pill that carries the white chip and slides between tabs. To do
   that it BLANKS the real chip:

     @media screen { .company-tabs.mint-glide-on > .company-tab.active {
       background-color: transparent !important; background-image: none !important; } }

   and paints the glider instead, using --mint-glider-radius, which defaults
   to a plain 10px on all four corners.

   That was fine when the active tab was a floating chip. It is wrong now that
   it is a tab welded to the content: a welded tab has a square bottom, is 4px
   taller than its neighbours, and by definition cannot slide anywhere. On a
   fresh load the glider seats cleanly, so the chip is blanked and a fully
   rounded pill is drawn in its place. Switching tabs then makes the 260ms
   watchdog notice the glider disagrees with the chip, strip mint-glide-on and
   let the real chip repaint. That is exactly the "breaks on reload, fixes when
   I switch tabs" behaviour.

   So these two tracks opt out: hide their glider and give the chip its fill
   back even while mint-glide-on is set. Every other track keeps the glider,
   because their active chip really does float and really can slide.
   ==================================================================== */
body .company-tabs > .mint-glider,
body .main-tabs > .mint-glider { display: none !important; }

@media screen {
  body .company-tabs.mint-glide-on > .company-tab.active {
    background-color: #f8fafc !important;
    background-image: none !important;
  }
  body .main-tabs.mint-glide-on > .main-tab.active {
    background-color: #f9fafb !important;
    background-image: none !important;
  }
}

/* ==== EMPLOYEE PAGE CONTROLS ====
   Section CTAs on the employee record were each styled separately, so the
   same job looked different in every panel: Add Note and Add Compensation
   had their own classes, Add dependent shipped a white outline while Add
   Beneficiary next to it shipped teal, and Copy Link was a primary button
   forced grey with an inline background.
   ==================================================================== */

/* Section CTAs. One job, one look: the primary action of the panel it heads. */
body .btn-add-note,
body .btn-add-comp,
body .dep-add-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 0 !important;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  cursor: pointer;
  color: #fff !important;
  background-color: var(--mint-btn-brand) !important;
  background-image: linear-gradient(180deg, var(--mint-btn-brand-top) 0%, var(--mint-btn-brand) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10),
    0 2px 8px -2px var(--mint-btn-glow) !important;
  transition: background-color .16s ease, box-shadow .16s ease !important;
}
body .btn-add-note:hover,
body .btn-add-comp:hover,
body .dep-add-btn:hover {
  background-image: linear-gradient(180deg, var(--mint-btn-brand-edge) 0%, var(--mint-btn-brand) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10),
    0 6px 18px -4px var(--mint-btn-glow-hover) !important;
}
/* The outline modifier existed only to make one Add button differ from the
   other; with both now primary it has nothing left to say. */
body .dep-add-btn.dep-add-outline { color: #fff !important; }

/* Copy Link is the quiet half of a pair whose loud half is Send Enrollment
   Link, so it is a secondary, not a primary wearing a grey inline override.
   Election History is a disclosure toggle at the foot of a panel, not a call
   to action, so it is secondary and compact. Both carry inline background,
   which is why these need !important. */
body #copyEnrollmentLinkBtn,
body #electionAuditToggleBtn {
  min-height: 44px;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--mint-btn-ink) !important;
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05) !important;
}
body #copyEnrollmentLinkBtn:hover,
body #electionAuditToggleBtn:hover {
  color: #0f172a !important;
  background-image: linear-gradient(180deg, #fff 0%, #f6f8fa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12) !important;
}
body #electionAuditToggleBtn { min-height: 38px; padding: 8px 15px !important; font-size: 0.86rem !important; }

/* Dependent picker. A solid teal block for "which dependent" read as a
   primary action rather than a selector. It is a switcher, so it uses the
   switcher language: quiet when not chosen, a raised chip when it is. */
body .dep-tab {
  display: inline-flex !important;
  align-items: center;
  min-height: 36px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  color: #3d605c !important;
  background: rgba(18,88,83,.07) !important;
  box-shadow: none !important;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}
body .dep-tab:hover { background: rgba(18,88,83,.12) !important; color: #12302e !important; }
body .dep-tab.active {
  color: #125853 !important;
  background: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(18,88,83,.09),
    0 1px 2px rgba(16,24,40,.10),
    0 2px 6px -2px rgba(18,88,83,.20) !important;
}

/* The dependent form shipped bare native selects beside styled inputs, which
   is the single biggest reason this panel looked unlike the rest. */
body .dep-form-input,
body .dep-form-select,
body .dep-modal-input {
  min-height: 44px;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--mint-btn-ink);
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04) !important;
  transition: box-shadow .16s ease !important;
}
body .dep-form-input:focus,
body .dep-form-select:focus,
body .dep-modal-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mint-btn-brand), 0 0 0 3px var(--mint-btn-focus-ring) !important;
}
body .dep-form-label,
body .dep-modal-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #64748b;
}

/* ==== DASHBOARD VIEW-ALL LINKS ====
   The two section links did the same job and looked different: View All
   Enrollments was plain text, while View All N Companies carried an arrow
   glyph from .view-all-link.prominent::after plus a 3px nudge on hover.
   One of them had to go, and the arrow is the one carrying no information:
   the label already says where it goes.
   ==================================================================== */
body .view-all-link.prominent::after { content: none !important; }
body .view-all-link.prominent { gap: 0 !important; }

/* ==== SETTINGS AS A TAB ====
   Settings now sits inside .company-tabs with its siblings rather than beside
   the row as a gear. Three things shipped to support the floating version and
   all three have to come off: the label was sr-only (a gear needs no text, a
   tab does), the button carried margin-left:auto to push itself to the far
   right of the row, and it had its own chip background so it read as a control
   rather than a tab. It keeps the cog, which is useful shorthand, but it is a
   tab now and behaves like one, welded bottom included.
   ==================================================================== */
body .company-tabs > .company-tab--settings > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap;
}
body .company-tabs > .company-tab--settings {
  margin: 0 !important;
  width: auto !important;
  height: 40px !important;
  padding: 0 11px !important;
  gap: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #3d605c !important;
  font-size: 0.875rem !important;
  font-weight: 550 !important;
}
body .company-tabs > .company-tab--settings > i { display: none !important; }
body .company-tabs > .company-tab--settings:hover {
  background: rgba(255,255,255,.45) !important;
  color: #12302e !important;
  box-shadow: none !important;
}
body .company-tabs > .company-tab--settings.active,
body .company-tabs > .company-tab--settings.active:hover {
  height: 44px !important;
  background: #f8fafc !important;
  color: #125853 !important;
  font-weight: 650 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}

/* ==== GLIDER OFF EVERYWHERE THE CHIP CARRIES A SHADOW ====
   The glider copies exactly two things off the real chip: background-color
   and border-radius. It does NOT copy box-shadow. Every chip in this file
   carries a four-layer shadow (top highlight, ring, contact, tinted lift),
   so wherever the glider is active it blanks the real chip and paints a flat
   white pill with none of that. On the enrollments filters that lands as a
   half-seated blob with a notch in it.

   .company-tabs and .main-tabs were opted out earlier for a different reason
   (a welded tab cannot slide). This covers the rest for this reason: a chip
   the glider cannot faithfully redraw must keep painting itself.
   ==================================================================== */
body .tabs > .mint-glider,
body .plans-tabs > .mint-glider,
body .filter-tabs > .mint-glider,
body .header-tabs > .mint-glider,
body .plan-tabs > .mint-glider { display: none !important; }

@media screen {
  body .tabs.mint-glide-on > .tab.active,
  body .plans-tabs.mint-glide-on > .plans-tab.active,
  body .filter-tabs.mint-glide-on > .filter-tab.active,
  body .header-tabs.mint-glide-on > .header-tab.active,
  body .plan-tabs.mint-glide-on > .plan-tab.active {
    background-color: #ffffff !important;
    background-image: none !important;
  }
}

/* ==== LIBRARY TABS: joined to the content ====
   /broker/library puts Forms / Drafts / Sent / Packets / Agency in the teal
   band using .tabs > .tab, a third class again, so it never picked up either
   joined treatment and its active tab floated.

   Here the element below is .content, which paints WHITE and carries a
   border-top. A welded tab has to break that line, not sit on it, so the
   fill is white and the rule comes off. Scoped to .page-header so inline
   .tabs groups elsewhere keep the floating chip.
   ==================================================================== */
body .page-header .tabs {
  align-items: flex-end !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow-y: hidden !important;
}
body .page-header .tabs > .tab {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px 10px 0 0 !important;
}
body .page-header .tabs > .tab:hover {
  background: rgba(255, 255, 255, .45) !important;
}
body .page-header .tabs > .tab.active,
body .page-header .tabs > .tab.active:hover {
  height: 44px !important;
  background: #ffffff !important;
  color: #125853 !important;
  font-weight: 650 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}
/* The content must not draw a line across the mouth of the open tab. */
body .page-header + .content,
body .content { border-top: none !important; }

/* ==== DASHBOARD ONBOARDING LINK ====
   Copy, Email and the sent count sat permanently under the link, three grey
   controls in a corner that is read once a week. They now appear when the
   pointer is anywhere in the block.

   opacity alone, never visibility or display: an element hidden those ways
   leaves the tab order, so a keyboard user could never reach Copy at all.
   At opacity 0 the controls stay focusable, and focusing one fires
   :focus-within on the box, which reveals the row. Layout never shifts
   because nothing leaves the flow. */
body .onboard-actions,
body .onboard-edit-btn {
  opacity: 0;
  transition: opacity .18s cubic-bezier(.16,1,.3,1);
}
body .onboard-box:hover .onboard-actions,
body .onboard-box:hover .onboard-edit-btn,
body .onboard-box:focus-within .onboard-actions,
body .onboard-box:focus-within .onboard-edit-btn {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body .onboard-actions, body .onboard-edit-btn { transition: none; }
}
/* Touch has no hover, so the controls must simply be present. */
@media (hover: none) {
  body .onboard-actions, body .onboard-edit-btn { opacity: 1; }
}

/* ==== LOGIN TAB, DEPENDENT TAB, STATUS PILL ====
   Three corrections and one upgrade.
   ==================================================================== */

/* 1. .login-action-btn is a LIST ROW, not a button: full width, icon then
   label then a right-aligned <small> meta, with a divider under each. It was
   swept into the secondary button group earlier, which gave it a 44px moulded
   card and centre-aligned its content, so a row designed to read
   "icon  label ........ meta" collapsed into a centred pill. Rows with a meta
   and rows without then looked like two different controls, which is why the
   two columns stopped matching.

   Restored as a row, and finished properly: dividers dropped in favour of a
   hover fill, which is the modern read and means every row is identical
   whether or not it carries a meta. */
body .login-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.004em !important;
  color: var(--mint-btn-ink) !important;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease !important;
}
body .login-action-btn > i {
  flex: 0 0 18px;
  width: 18px;
  font-size: 15px !important;
  text-align: center;
  color: #94a3b8;
  transition: color .16s ease;
}
body .login-action-btn > span { flex: 1 1 auto; min-width: 0; }
/* The meta is the one thing that must stay right, on every row that has one. */
body .login-action-btn > small {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #94a3b8;
}
body .login-action-btn:hover {
  background: rgba(15,23,42,.045) !important;
  color: #0f172a !important;
}
body .login-action-btn:hover > i { color: var(--mint-btn-brand); }
body .login-action-btn:hover > small { color: #64748b; }

/* 2. Upload Photo / Remove. Never in the system, so they stayed unstyled and
   narrow enough that "Upload Photo" wrapped onto two lines. */
body .login-action-btn-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap !important;   /* the wrap was the whole problem */
  cursor: pointer;
  color: var(--mint-btn-ink);
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05);
  transition: box-shadow .16s ease, color .16s ease, background-color .16s ease;
}
body .login-action-btn-sm:hover {
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12);
}
body .login-action-btn-sm.login-action-danger:hover {
  color: #dc4a42;
  background-color: #fff6f5;
  background-image: none;
  box-shadow: inset 0 0 0 1px #f2c6c2, 0 2px 7px -2px rgba(220,74,66,.28);
}
body .profile-photo-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* 3. The status. It shipped as 0.8rem text on background:none, so a value as
   consequential as "this login is not active yet" read as a caption. It is a
   state, so it gets a real pill with a tinted ground. */
body .status-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.84rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.003em;
}
body .status-badge > i { font-size: 0.9em; }
body .status-badge.status-pending { background: #fef4e6 !important; color: #b45309 !important; }
body .status-badge.status-active  { background: #e7f6ee !important; color: #15803d !important; }
body .status-badge.status-locked  { background: #fdeceb !important; color: #b91c1c !important; }

/* 4. The dependent picker was ALREADY a welded tab: border-radius 2px 2px 0 0
   with margin-bottom:0, sitting on .dep-form-card. Restyling it as a floating
   chip broke that join. Given the same treatment as every other welded tab,
   filled to match .dep-form-card, which is white. */
body .dep-tabs {
  align-items: flex-end !important;
  gap: 2px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow-y: hidden !important;   /* overflow-x:auto computes y to auto too */
}
body .dep-tab {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9px 9px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .dep-tab:hover { background: rgba(18,88,83,.07) !important; color: #12302e !important; }
body .dep-tab.active,
body .dep-tab.active:hover {
  height: 40px !important;
  background: #fff !important;
  color: #125853 !important;
  font-weight: 650 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}

/* ==== ROW ICON ACTIONS ARE BARE ICONS ====
   Only the action carrying a word (Enroll) earns button depth. The refresh and
   extend actions beside it are icons, so they are icons: no box, no border, no
   fill at rest, just a bigger glyph and a hover ground. Three boxed controls
   per row on a long table is three times the chrome for one decision.

   The page gives these buttons background/border/32px inline AND rewrites
   background and borderColor from onmouseover handlers, so every property here
   needs !important: an author !important outranks a normal inline declaration,
   including one written by script. */
body tbody td button[style*="width"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]) {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  /* min-height must be restated here. The generic inline-control rule sets
     min-height:44px at (0,4,1); this rule sets height:34px at (0,5,3). Height
     loses to a larger min-height whatever the specificity, so every row action
     in the product was rendering 44px tall and every table row was 10px taller
     than the row rule asks for. */
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  transition: background-color .16s ease, color .16s ease !important;
}
body tbody td button[style*="width"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]) i { font-size: 18px !important; }
/* Colour is the whole hover. No ground, no ring, no shadow: a row of icons
   that each grow a box on approach is noise, and the cursor already says which
   one you are on.

   box-shadow must be re-stated HERE, not only on the base rule. The generic
   inline-control hover is (0,5,2) while the base icon rule is (0,4,4), so on
   hover that moulded shadow outranks the base and leaks back in. Restating it
   at (0,5,4) closes it. */
body tbody td button[style*="width"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]):hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--mint-btn-brand) !important;
}

/* ==== CHIP TRACKS MUST NOT CLIP THEIR OWN SHADOW ====
   A floating chip carries an outer contact shadow. overflow-x:auto computes
   overflow-y to auto as well, so these tracks clipped that shadow flat and
   left a notch under each chip: visible as a bitten-out corner on the
   All / Active / Upcoming / Ended filters.

   overflow-x:auto exists on .company-tabs because thirteen tabs genuinely can
   overrun the column. These sets are four or five short words and never will,
   so they do not clip at all. The vertical padding gives the shadow somewhere
   to land inside the row box. */
body .filter-tabs,
body .plans-tabs,
body .header-tabs,
body .plan-tabs {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
  flex-wrap: nowrap !important;
}

/* ==== TOOLTIP ====
   It shipped at 4px radius with a flat 0 2px 6px shadow, in a system where the
   softest corner otherwise is 9px and every raised surface has a two-part
   shadow. So it read as a browser tooltip that had wandered in rather than part
   of the product.

   Same slate, but the corner, the weight and the shadow now match the rest,
   and it sits 9px clear of its anchor instead of 6px so it stops crowding the
   row above. The transform on these pseudo-elements is the page's own centring
   maths and is left alone: a pseudo-element cannot hold a position:fixed
   descendant, so it cannot cause the containing-block trap. */
body [data-tooltip]:not(.action-btn)::before {
  bottom: calc(100% + 9px);
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: -0.003em;
  line-height: 1.35;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 6px 18px -4px rgba(16,24,40,.34), 0 1px 3px rgba(16,24,40,.22);
}
/* arrow geometry lives with the base below, so there is one place to change it */

/* ==== TABLE ROW GLYPHS, PRODUCT-WIDE ====
   .btn-icon ships font-size:13px inside a 32px box, and the other row-action
   classes are similar. A 13px glyph is a target you have to aim at; these are
   read by people who should not have to. 18px in a 38px box, product-wide, so
   job classes, locations, plans and documents all agree.

   Hover is colour only, matching the employees rows: no ground, no ring. The
   page paints .btn-icon:hover with #f3f4f6 and .btn-icon.danger:hover with
   #fef2f2, so both need overriding.

   Specificity note: the glyph rules carry the tbody td prefix so they clear
   the page rules that set font-size on the BUTTON and let the <i> inherit. */
body tbody td .btn-icon,
body tbody td [class*="action-btn"],
body tbody td .dep-remove-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: color .16s ease !important;
}
body tbody td button i,
body tbody td button svg,
body tbody td .btn-icon > i,
body tbody td [class*="action-btn"] > i,
body tbody td a[class*="action"] > i { font-size: 18px !important; }

body tbody td .btn-icon:hover,
body tbody td [class*="action-btn"]:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--mint-btn-brand) !important;
}
body tbody td .btn-icon.danger:hover,
body tbody td .btn-icon-danger:hover,
body tbody td [class*="action-btn"].delete:hover,
body tbody td [class*="action-btn"].danger:hover {
  background: transparent !important;
  color: #b91c1c !important;
}

/* ==== PLAN PAGE ====
   A fourth tab class (.plan-tabs > .plan-tab) and a header action pair that was
   never in the system, so this page agreed with nothing.
   ==================================================================== */

/* Welded tabs. The element below is .content-area on a #f8fafc body, so that
   is the fill. Same overflow close as the other welded rows. */
body .plan-tabs {
  align-items: flex-end !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow-y: hidden !important;
  overflow-x: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .plan-tabs > .plan-tab {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .plan-tabs > .plan-tab:hover { background: rgba(255,255,255,.45) !important; }
body .plan-tabs > .plan-tab.active,
body .plan-tabs > .plan-tab.active:hover {
  height: 44px !important;
  background: #f8fafc !important;
  color: #125853 !important;
  font-weight: 650 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}

/* Header actions. .header-btn was never in the system: the pair rendered as a
   plain outline and a flat #dc2626 block. */
body .header-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border: 0 !important;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
body .header-btn.secondary {
  color: var(--mint-btn-ink) !important;
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05) !important;
}
body .header-btn.secondary:hover {
  color: #0f172a !important;
  background-image: linear-gradient(180deg, #fff 0%, #f6f8fa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12) !important;
}
/* Deleting a plan is rare and irreversible, so it stays a real danger button
   rather than the quiet glyph a repeated row action gets. */
body .header-btn.danger {
  color: #fff !important;
  background-color: var(--mint-btn-danger) !important;
  background-image: linear-gradient(180deg, var(--mint-btn-danger-top) 0%, var(--mint-btn-danger) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-danger-edge),
    0 0 0 1px var(--mint-btn-danger-press),
    0 1px 2px rgba(16,24,40,.10),
    0 2px 8px -2px rgba(224,82,74,.42) !important;
}
body .header-btn.danger:hover {
  background-image: linear-gradient(180deg, var(--mint-btn-danger-edge) 0%, var(--mint-btn-danger) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-danger-edge),
    0 0 0 1px var(--mint-btn-danger-press),
    0 6px 18px -4px rgba(224,82,74,.52) !important;
}
body .header-btn .back-logo { width: 21px; height: 21px; border-radius: 6px; object-fit: cover;
  flex-shrink: 0; background: #fff; box-shadow: 0 0 0 1px rgba(16,24,40,.09); }

/* The status told you twice: a coloured dot and the word beside it. The word
   is the one that survives being read quickly, so the dot goes and the word
   becomes a real pill. JS rewrites this innerHTML on every render, dot and
   all, which is why it is removed in CSS rather than in the template. */
body #planStatus > i { display: none !important; }
body .status-badge.active { background: #e7f6ee !important; color: #15803d !important; }
body .status-badge.inactive,
body .status-badge.archived { background: #f1f5f9 !important; color: #475569 !important; }

/* ==== ONBOARDING SLUG EDITOR: BACK TO INLINE ====
   I inflated this and it was wrong. It is a short slug edited in the corner of
   a dashboard, not a form. The shipped design was right: an UNDERLINE input
   (.slug-input.valid only ever set border-bottom-color, which is the tell),
   two 0.7rem inline buttons, and a pencil whose hover was colour only. Sweeping
   .slug-input into the 44px field group and .slug-btn into the button group
   turned a one-line edit into a dialog.

   Restored, with one deliberate change: the pencil went from 0.65rem to 0.8rem
   because it was genuinely too small to hit. */
body .onboard-box .slug-input,
body .slug-edit-wrap .slug-input,
body #customSlugInput {
  min-height: 0 !important;
  height: auto !important;
  border: none !important;
  border-bottom: 1.5px solid #1f8f88 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1f8f88 !important;
  padding: 1px 20px 1px 2px !important;
}
body .onboard-box .slug-input:focus,
body .slug-edit-wrap .slug-input:focus,
body #customSlugInput:focus { box-shadow: none !important; outline: none !important; }
body .onboard-box .slug-input.valid { border-bottom-color: #10b981 !important; }
body .onboard-box .slug-input.invalid { border-bottom-color: #ef4444 !important; }

body .slug-btn {
  min-height: 0 !important;
  height: auto !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  background-image: none !important;
  box-shadow: none !important;
}
body .slug-btn.save { background: #1f8f88 !important; color: #fff !important; }
body .slug-btn.save:hover { background: #1a7a74 !important; box-shadow: none !important; }
body .slug-btn.save:disabled { background: #e2e8f0 !important; color: #94a3b8 !important; }
body .slug-btn.cancel { background: transparent !important; color: #64748b !important; }
body .slug-btn.cancel:hover { background: rgba(15,23,42,.06) !important; color: #0f172a !important; box-shadow: none !important; }

/* Colour only, which is what the page already asked for. */
body .onboard-edit-btn {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 3px 6px !important;
  font-size: 0.8rem !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
body .onboard-edit-btn:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #1f8f88 !important;
}

/* ==== TOOLTIP PRIMITIVE, AVAILABLE EVERYWHERE ====
   The implementation lived only in company.html, so any other page using
   data-tooltip got nothing and fell back to the browser title. Carrying the
   base here means one tooltip across the product. Pages that already define it
   are unaffected: this file loads last, so the values above simply win. */
body [data-tooltip]:not(.action-btn) { position: relative; }
body [data-tooltip]:not(.action-btn)::before,
body [data-tooltip]:not(.action-btn)::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .15s ease, transform .15s ease;
}
body [data-tooltip]:not(.action-btn)::before {
  content: attr(data-tooltip);
  right: 50%;
  transform: translateX(50%) translateY(2px);
  white-space: nowrap;
}
body [data-tooltip]:not(.action-btn)::after {
  content: "";
  right: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(50%) translateY(2px);
  /* The box IS the triangle: no bottom border, so it ends exactly where the
     bubble begins. A "border: Npx solid transparent" shorthand here would reset
     the coloured side and make the arrow vanish, which is what it did. */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #0f172a;
  border-bottom: 0;
}
body [data-tooltip]:not(.action-btn):hover::before,
body [data-tooltip]:not(.action-btn):hover::after,
body [data-tooltip]:not(.action-btn):focus-visible::before,
body [data-tooltip]:not(.action-btn):focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0);
}

/* ==== COMPANY SETTINGS ====
   .slug-input here is an ordinary boxed field, not the dashboard's inline
   underline editor. It only shares the class name. */
body .docs-section .slug-input,
body #companySlugInput,
body #companySubdomainInput,
body #companyCustomDomainInput {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  background-image: none !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--mint-btn-ink) !important;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line), 0 1px 2px rgba(16,24,40,.04) !important;
}
body #companySlugInput:focus,
body #companySubdomainInput:focus,
body #companyCustomDomainInput:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--mint-btn-brand), 0 0 0 3px var(--mint-btn-focus-ring) !important;
}

/* The delete glyphs were 13px in a box sized for a label. A destructive action
   you are meant to find deliberately should not be the smallest thing on the
   card. Matched to the table row glyphs: 38px target, 18px mark, no chrome. */
body .btn-secondary.btn-icon-danger,
body .btn-sm.btn-icon-danger,
body .btn-icon-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #dc4a42 !important;
  transition: color .16s ease !important;
}
body .btn-icon-danger > i { font-size: 18px !important; }
body .btn-icon-danger:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: #b91c1c !important;
}

/* The other implementation. Same look, their structure: one ::after carrying
   the whole bubble. It shipped teal with a teal glow, which made a tooltip read
   as a brand element rather than a label. Matched to the slate tooltip so both
   implementations look like one thing. */
body .action-btn::after {
  background: #0f172a !important;
  color: #f8fafc !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.003em !important;
  bottom: calc(100% + 9px) !important;
  box-shadow: 0 6px 18px -4px rgba(16,24,40,.34), 0 1px 3px rgba(16,24,40,.22) !important;
}

/* ==== STOP THE SCROLLBAR SHIFT ====
   A short page has no scrollbar and a tall one does, so the content column
   jumps sideways by the scrollbar width every time you move between them.
   Every centred layout in this product is affected, which is why navigating
   feels like it breaks your place.

   scrollbar-gutter:stable reserves the space permanently WITHOUT drawing a
   scrollbar on pages that do not need one, so short pages stay clean and the
   column never moves. It goes on the root scroller, not on body, or the
   reservation is made in the wrong box.

   The fallback is the old trick, overflow-y:scroll, which always paints an
   inert track. Uglier, but it holds the column still, and it only applies
   where scrollbar-gutter is unsupported.

   Overlay scrollbars (macOS default, touch) reserve nothing either way, so
   nothing changes there. No page in this product sets overflow on html, and
   none uses a body scroll-lock class, so there is nothing for this to fight. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* The other implementation keeps its arrow on ::before, and it was left teal
   when the bubble went slate, so the two no longer matched. It also sits at
   bottom:2px with a 6px border, putting the visible triangle at 8-14px while
   the bubble now starts at 9px, so the arrow rendered inside the bubble and
   could not be seen. Same geometry fix, same colour.

   Both pseudo-elements also get one transition declaration, so the arrow and
   the bubble arrive and leave together instead of the arrow trailing. */
body .action-btn::before {
  bottom: calc(100% + 4px) !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 5px solid #0f172a !important;
  border-bottom: 0 !important;
}
body .action-btn::before,
body .action-btn::after {
  transition: opacity .14s ease, transform .14s ease !important;
}

/* ==== SCROLLBAR ====
   A scrollbar is a position indicator first and a control second: you read past
   it a hundred times for every time you drag it. So it is built to be ignored.

   NOT TEAL AT REST. The obvious move is a brand-coloured thumb, and it is wrong:
   every CTA, link and active tab on these pages is teal, so a teal bar riding
   the edge of every screen competes with the things that are actually asking to
   be clicked. At rest it is a desaturated slate that merely LEANS teal, so it
   belongs to the page without joining the conversation. It warms toward brand
   only under the pointer, which is the one moment it is the subject.

   No track fill, no end buttons, no corner. A groove drawn down every screen is
   a permanent vertical rule the layout never asked for.

   The thumb is inset with a transparent border plus background-clip:padding-box
   rather than a narrow scrollbar, so the hit area stays a comfortable 11px while
   the visible pill is 5px. Thin to look at, easy to catch.

   Paired with the scrollbar-gutter:stable above, so reserving the space and
   drawing in it agree. Rules that deliberately hide a scrollbar (the tab rows,
   the search boxes) are more specific and keep winning. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  background-color: rgba(18, 88, 83, .20);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(18, 88, 83, .36); }
::-webkit-scrollbar-thumb:active { background-color: rgba(31, 143, 136, .55); }

/* Firefox has no pseudo-elements for this, only the two properties. thin is
   its own idea of narrow, which lands close to the 11px above. */
html { scrollbar-width: thin; scrollbar-color: rgba(18, 88, 83, .24) transparent; }

body.dark-mode ::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, .26); }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, .42); }
body.dark-mode { scrollbar-color: rgba(148, 163, 184, .3) transparent; }

/* ==== ENROLLMENT STATUS IN THE ROW ====
   Waiving is a DECISION, not a success and not a failure. Green said the
   employee got covered, which is the opposite of what happened. Grey is the
   honest register: it is settled, nothing is outstanding, and nothing went
   wrong. It also matches the grey this product already uses for the waived
   segment in the progress rings and the waived chip on the dashboard, so the
   three places that report waiving finally agree.

   Red is available if you want it louder, but red on a legitimate employee
   choice reads as an error the broker has to go fix. */
body .btn-enrollment-completed.is-waived { color: #64748b !important; }
body .btn-enrollment-completed.is-waived:hover { color: #475569 !important; }

/* The actions cell ships text-align:center, so the group is centred on the
   column: a row with three controls and a row with two do not line up, and the
   trailing item wanders left exactly where the eye is scanning down it.
   Right-aligned, the last thing in every row lands on the same edge, which is
   where Enroll already sits. Scoped to the employees table so other tables that
   want a centred cell keep it. */
body #employeesTable td:last-child:not([colspan]) { text-align: right !important; }
/* A settled row has no Enroll button, so the label takes that slot instead of
   collapsing to its text width. */
body #employeesTable .btn-enrollment-completed { min-width: 96px; justify-content: flex-end; }

/* ==== FULL-BLEED BARS VS THE RESERVED GUTTER ====
   .benefits-subtab-bar and .docs-subtab-bar break out of the centred column
   with width:100vw + left:50% + translateX(-50%). 100vw INCLUDES the scrollbar,
   so once scrollbar-gutter:stable reserves that space they are about 15px wider
   than the content box and the whole page gains a horizontal scrollbar. That
   was a side effect of the gutter change, not of anything on those bars.

   clip, not hidden. overflow-x:hidden turns body into a scroll container, which
   breaks position:sticky and changes how the fixed pagination bar resolves.
   overflow-x:clip cannot be scrolled and establishes no containing block for
   fixed descendants, so the bar is unaffected and the 15px simply never shows. */
body { overflow-x: clip; }

/* ==== EMAILS TAB, THE OVERVIEW ====
   The tab opened on two unexplained switches, then seven sub-tabs, then a
   question, then five zeros, then three empty panels. A broker with ten minutes
   meets the machinery before the job.

   Order of operations here: the job first, the settings last, and the analytics
   only once there is something to analyse (that part is in emails-page.js).
   ==================================================================== */

/* REVERTED: making .main a flex column and reordering its children stranded
   the toggle strip at the foot of a tall empty page and broke the shell's own
   stacking. The strip goes back where the page put it. Its weight is dialled
   down instead, which was the real complaint: it was loud, not misplaced. */
body.em-embed .em-embed-bar {
  font-size: 0.82rem;
  padding: 9px 24px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--mint-btn-line) !important;
  color: #64748b;
}

/* The action card is the point of the page, so it reads like one. */
body .em-start {
  border: 1px solid var(--mint-btn-line) !important;
  border-radius: 14px !important;
  padding: 24px 26px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
body .em-start .em-section-intro { margin-bottom: 18px !important; }
body .em-start h2 { font-size: 1.12rem; letter-spacing: -0.015em; margin: 0 0 6px; }
body .em-start p { color: #64748b; font-size: 0.9rem; margin: 0; }
body .em-start-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body .em-start-note { margin-top: 18px !important; font-size: 0.83rem; color: #94a3b8; }

/* Five tiles across is five columns of nothing on most screens. Three reads as
   a group; the remaining two wrap under it instead of shrinking to slivers. */
body .em-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
body .em-stat {
  border: 1px solid var(--mint-btn-line) !important;
  border-radius: 14px !important;
  padding: 15px 17px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
body .em-stat-value { font-size: 1.45rem !important; letter-spacing: -0.02em; }
/* emails.css kills the left edge on every tile but the first, with
   `.em-stat + .em-stat { border-left: 0 !important }`. That was right when the
   five tiles were one strip divided by column rules; once each became a card
   with a border of its own, it takes a side off four of them. The same trap is
   recorded two lines below it in that file for the two-panel row and fixed
   there; the stat row was missed. (0,2,1) to outrank (0,2,0). */
body .em-stat + .em-stat { border-left: 1px solid var(--mint-btn-line) !important; }

/* Panels match the table shell used everywhere else in the product. */
body.em-embed .card {
  border: 1px solid var(--mint-btn-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
body.em-embed .card-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--mint-btn-line) !important;
  background: #f8fafc;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}
body.em-embed .card-title { font-size: 0.9rem; font-weight: 650; }

/* ==== MODALS AND THE DECISION MAKER LIST ====
   ==================================================================== */

/* The overlay used inset:0, which resolves against the initial containing
   block: the viewport MINUS the reserved scrollbar gutter. So it stopped short
   of the right edge and left a pale strip. 100vw includes that gutter, and the
   overflow-x:clip on body above means it cannot create a scrollbar. */
body .modal-overlay { width: 100vw !important; }

/* One divider, above the buttons. A rule under the title separates the title
   from its own content, which it does not need: the title is already a heading
   and the gap does the work. The footer rule earns its place because it marks
   where reading stops and committing starts. */
body .modal-header {
  border-bottom: 0 !important;
  padding: 22px 26px 4px !important;
}
body .modal-title { font-size: 1.14rem !important; font-weight: 650 !important; letter-spacing: -0.015em; }
body .modal-body { padding: 18px 26px 22px !important; }
body .modal-footer {
  border-top: 1px solid var(--mint-btn-line) !important;
  padding: 16px 26px !important;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fcfdfd;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
body .modal { border-radius: 16px !important; box-shadow: 0 24px 64px -12px rgba(16,24,40,.28), 0 0 0 1px rgba(16,24,40,.05) !important; }

/* Depth by ground, not by rules: a field group sits on a tint so it reads as
   one object without a line drawn round every part of it. */
body .modal-body .form-group + .form-group { margin-top: 16px; }

/* The decision maker list was 0.85rem contact text and 15px icons for the three
   actions that matter most on this card: message, edit, remove. It is a list of
   people, so the people are the biggest thing in it. */
body .dm-card { padding: 14px 16px !important; gap: 14px !important; border-radius: 12px !important; }
body .dm-card-avatar { width: 44px !important; height: 44px !important; border-radius: 12px !important; font-size: 17px !important; }
body .dm-card-name { font-size: 1rem !important; font-weight: 650 !important; gap: 10px !important; }
body .dm-card-email { font-size: 0.88rem !important; margin-top: 3px !important; color: #64748b !important; }
body .dm-card-right { gap: 4px !important; }
body .dm-actions-btn {
  width: 38px !important;
  height: 38px !important;
  font-size: 17px !important;
  background: transparent !important;
  border-radius: 10px !important;
  color: #64748b !important;
  transition: background-color .16s ease, color .16s ease !important;
}
body .dm-actions-btn:hover { background: rgba(15,23,42,.06) !important; color: var(--mint-btn-brand) !important; }

/* ==== EMAILS EMBED: MATCH THE DOCUMENTS TAB ====
   Documents is the pattern every tab should follow: a full-width sub-nav with a
   single rule under it, then content filling the column. The emails frame was
   indenting its sub-nav and centring its content inside an already-centred
   column, so it read as a page floating inside a page.

   The frame cannot become a direct child of the tab, so it is made to behave
   like one: the sub-nav spans the frame edge to edge, the content fills it, and
   the sub-tabs are the same underline the rest of the product uses rather than
   a pill track. */

body.em-embed .docs-subtab-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--mint-btn-line) !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.em-embed .docs-subtab-bar-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  gap: 0 !important;
}
body.em-embed .docs-subtab-track {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  height: auto !important;
}
/* Underline, not a chip. Matches Documents, Benefits and the employee record. */
body.em-embed .docs-subtab {
  height: auto !important;
  padding: 13px 0 !important;
  margin-right: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  font-weight: 550 !important;
  color: #64748b !important;
  position: relative;
}
body.em-embed .docs-subtab:hover { color: var(--mint-btn-brand) !important; background: transparent !important; }
body.em-embed .docs-subtab.active {
  color: var(--mint-btn-brand) !important;
  font-weight: 650 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.em-embed .docs-subtab.active::after {
  display: block !important;
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--mint-btn-brand);
}
body.em-embed .docs-subtab > i { display: inline-block !important; margin-right: 7px; opacity: .7; font-size: 0.9em; }

/* Content fills the frame instead of being centred inside a column that is
   already centred by the company page. */
body.em-embed .content {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 22px 32px 40px !important;
}
body.em-embed .em-start { margin-bottom: 20px !important; }

/* ==== EMAILS FRAME: FULL BLEED ====
   Documents runs its sub-nav edge to edge across the page and centres only the
   content under it. The emails frame sits inside .content-inner, which is capped
   at 1280px and centred, so everything it draws starts 345px in: the sub-nav
   could never reach the edges no matter how it was styled. That is the whole
   reason this tab looked inset while every other tab did not.

   The frame breaks out of that column with the same technique the rest of the
   page uses for full-bleed bars. 100vw is safe here because body carries
   overflow-x:clip, which is what stops the reserved scrollbar gutter turning
   this into a sideways scroll.

   Inside the frame the content goes back to a centred 1280px column, so the
   result is exactly the Documents shape: full-width nav, centred content. */
body #tab-emails {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* .content-inner pads 24px here and 16px under 768px, and .content-area
     draws a 1px rule across the top of the band. Both showed as a grey seam
     between the tab and the frame. Cancelled exactly, not padded over. */
  margin-top: -24px;
  background: #f8fafc;
}
body #tab-emails > iframe { display: block; }
@media (max-width: 768px) { body #tab-emails { margin-top: -16px; } }

/* The switches become a quiet full-width strip above the nav rather than a card
   floating inside the column. */
body.em-embed .em-embed-bar {
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 32px !important;
  background: #f8fafc !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mint-btn-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.82rem;
  color: #64748b;
}
body.em-embed .docs-subtab-bar-inner { max-width: 1280px !important; margin: 0 auto !important; padding: 0 32px !important; }

/* ==== EMAILS FRAME: GUTTERS ====
   The frame shares the page's ground, so its welded tab needs no fill of its
   own: the shared .company-tab.active rule is already right. It was painted
   white for a while, which made this the one tab in the product that opened
   into a different colour.

   The bar runs edge to edge because the rule under it should, but its
   CONTENT lines up with the 1280px column the rest of the page uses. max() does
   that in one declaration and degrades to a plain 32px on narrow screens. */
body.em-embed .em-embed-bar,
body.em-embed .docs-subtab-bar-inner {
  padding-left: max(32px, calc((100% - 1280px) / 2 + 32px)) !important;
  padding-right: max(32px, calc((100% - 1280px) / 2 + 32px)) !important;
  max-width: none !important;
  margin: 0 !important;
}
body.em-embed .docs-subtab-bar-inner { align-items: center !important; }

/* ==== THE SECOND BAR ====
   The two company switches had a full-width strip of their own stacked on the
   sub-nav: two bands of chrome above every view, for two controls that get set
   once. emails-page.js moves them onto the sub-nav row instead, which was
   half empty, and this is where they land. One bar.

   .docs-subtab carries display:inline-flex !important, which outranked the
   plain .docs-subtab[hidden] rule the page uses to hide Contacts and Settings
   inside a company. Both are agency-wide views and were never meant to appear
   here; they have been rendering anyway. */
body .docs-subtab[hidden] { display: none !important; }

body.em-embed .em-embed-flags {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  padding-left: 32px;
  font-size: 0.82rem;
  color: #64748b;
}
body.em-embed .em-embed-flags > label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}
body.em-embed .em-embed-bar { padding-top: 11px !important; padding-bottom: 11px !important; }
body.em-embed .content {
  max-width: none !important;
  margin: 0 !important;
  padding: 24px max(32px, calc((100% - 1280px) / 2 + 32px)) 40px !important;
}

/* ==========================================================================
   EMAILS FRAME: THE PLACEHOLDER
   #tab-emails is full bleed, so a skeleton dropped straight into it inherited
   the whole viewport width. The cards stretched to 1600px and their left and
   right borders ran off screen, which is why what was left on screen read as
   three stray rules across the page rather than as cards.

   This placeholder has the frame's shape instead: two edge-to-edge strips
   whose CONTENT sits on the same column gutter the real switch bar and sub-nav
   sit on, then the page body in the same centred column. Same max() as the
   frame, so nothing slides sideways when the real thing lands.

   It also carries the iframe's min-height. Without that the white ran out at
   about 250px and the page ground showed through underneath, then the frame
   arrived at 720px and everything below it jumped.
   ========================================================================== */
body #emailsTabSkeleton {
  min-height: 720px;
  background: #f8fafc;
}

/* 13px + a 20px label + 13px: the real sub-nav, measured not guessed. The
   mark widths in the markup are the real labels' widths, so the five stand
   where the five tabs will. */
body .em-sk-nav {
  display: flex;
  align-items: center;
  height: 46px;
  gap: 24px;
  border-bottom: 1px solid var(--mint-btn-line);
  padding-left: max(32px, calc((100% - 1280px) / 2 + 32px));
  padding-right: max(32px, calc((100% - 1280px) / 2 + 32px));
}
body .em-sk-flags { display: flex; align-items: center; gap: 24px; margin-left: auto; }
body .em-sk-pair { display: flex; align-items: center; gap: 9px; }
body .em-sk-nav .em-sk-switch { width: 40px; height: 22px; border-radius: 999px; }

body .em-sk-body {
  padding: 24px max(32px, calc((100% - 1280px) / 2 + 32px)) 40px;
}
body .em-sk-body > .sk-line { margin-bottom: 13px; }
body .em-sk-actions { display: flex; gap: 10px; margin-top: 22px; }
body .em-sk-actions > .em-sk-btn { height: 44px; border-radius: 12px; }

/* ==========================================================================
   ACA TAB
   This tab shipped a complete parallel system: .aca-btn, .aca-btn-primary,
   .aca-btn-download, .aca-quick-btn, .aca-year-pill and a pager, each drawn
   flat by hand. Nothing on it was wrong on its own; it simply belonged to a
   different product than the tab beside it.

   The page's own rules are #tab-aca (1,1,0) and marked important, and they
   come later in the document than this file, so every selector here carries
   body #tab-aca to outrank them rather than to shout.
   ========================================================================== */

/* ---- the year ----
   A bare box with a number in it. Nothing said it could be changed, so it
   read as a badge. It becomes the same white control as every other select,
   with the caret that says it opens. */
body #tab-aca .aca-year-pill {
  display: inline-flex !important;
  align-items: center;
  height: 38px;
  padding: 0 34px 0 14px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%),
    linear-gradient(180deg, #fff 0%, #fbfcfd 100%) !important;
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px, 0 0 !important;
  background-size: 5px 5px, 5px 5px, 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05) !important;
  transition: box-shadow .16s ease;
}
body #tab-aca .aca-year-pill:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12) !important;
}
body #tab-aca .aca-year-pill select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mint-btn-ink);
  cursor: pointer;
  outline: none;
}

/* ---- the three buttons on the generate card ---- */
body #tab-aca .aca-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px !important;
  height: auto !important;
  padding: 11px 22px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: inherit;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: -0.006em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}
body #tab-aca .aca-btn-primary {
  color: #fff !important;
  background-color: var(--mint-btn-brand) !important;
  background-image: linear-gradient(180deg, var(--mint-btn-brand-top) 0%, var(--mint-btn-brand) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10),
    0 2px 8px -2px var(--mint-btn-glow) !important;
}
body #tab-aca .aca-btn-primary:hover:not(:disabled) {
  background-image: linear-gradient(180deg, var(--mint-btn-brand-edge) 0%, var(--mint-btn-brand) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10),
    0 6px 18px -4px var(--mint-btn-glow-hover) !important;
}
body #tab-aca .aca-btn-primary:active:not(:disabled) {
  background-image: none !important;
  background-color: var(--mint-btn-brand-press) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.24),
    0 0 0 1px var(--mint-btn-brand-press) !important;
}
body #tab-aca .aca-btn-download,
body #tab-aca .aca-quick-btn {
  color: var(--mint-btn-ink) !important;
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05) !important;
}
body #tab-aca .aca-btn-download:hover:not(:disabled),
body #tab-aca .aca-quick-btn:hover:not(:disabled) {
  color: #0f172a !important;
  background-image: linear-gradient(180deg, #fff 0%, #f6f8fa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12) !important;
}
body #tab-aca .aca-btn-download:active:not(:disabled),
body #tab-aca .aca-quick-btn:active:not(:disabled) {
  background-image: none !important;
  background-color: #f1f5f9 !important;
  box-shadow:
    inset 0 2px 3px rgba(16,24,40,.10),
    inset 0 0 0 1px var(--mint-btn-line-hover) !important;
  transform: none !important;
}

/* The annual review opens a different screen. It is not a third thing to do
   on this card, so it carries no fill until you reach for it. */
body #tab-aca .aca-btn-quiet {
  color: #64748b !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body #tab-aca .aca-btn-quiet:hover {
  color: var(--mint-btn-brand) !important;
  background-color: rgba(18,88,83,.06) !important;
  box-shadow: none !important;
}

/* Disabled is a quieter version of the same button, never a grey slab: the
   ZIP does not exist until the forms are generated, so the button should look
   like it is waiting rather than broken. */
body #tab-aca .aca-btn:disabled {
  opacity: 1 !important;
  color: #94a3b8 !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px #eef2f6 !important;
  cursor: not-allowed;
}

/* ---- the row actions ---- */
body #tab-aca .aca-quick-btn {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}
body #tab-aca .aca-quick-btn:active { transform: none !important; }

/* The name and the tag column were both flex:1, so they split the row's slack
   between them and the tags landed in the middle of open space, at a
   different place on every row. The tags belong with the actions they
   explain: one cluster on the right, one name on the left. */
body #tab-aca .aca-missing-name { flex: 1 1 auto !important; min-width: 0; }
body #tab-aca .aca-missing-tags {
  flex: 0 0 auto !important;
  margin: 0 !important;
  justify-content: flex-end;
}

/* The count sat at the far end of a 1200px header, a long way from the thing
   it counts. Every other panel in the product puts it against the title. */
body #tab-aca .aca-missing-header {
  justify-content: flex-start !important;
  gap: 10px !important;
}

/* ---- the search and the pager ---- */
body #tab-aca .aca-missing-search {
  height: 40px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.04) !important;
  transition: box-shadow .16s ease;
}
body #tab-aca .aca-missing-search:focus {
  box-shadow:
    inset 0 0 0 1px var(--mint-btn-brand),
    0 0 0 3px var(--mint-btn-focus-ring) !important;
}
body #tab-aca .aca-missing-pager button {
  width: 32px; height: 32px;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--mint-btn-ink) !important;
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05) !important;
  transition: box-shadow .16s ease, color .16s ease, background-color .16s ease;
}
body #tab-aca .aca-missing-pager button:hover:not(:disabled) {
  color: #0f172a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12) !important;
}
body #tab-aca .aca-missing-pager button.active {
  color: #fff !important;
  background-color: var(--mint-btn-brand) !important;
  background-image: linear-gradient(180deg, var(--mint-btn-brand-top) 0%, var(--mint-btn-brand) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10) !important;
}
body #tab-aca .aca-missing-pager button:disabled {
  color: #cbd5e1 !important;
  background-image: none !important;
  background-color: #f8fafc !important;
  box-shadow: inset 0 0 0 1px #eef2f6 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   MINT EMPTY-STATE VIGNETTES
   One drawing per subject, not one drawing reused everywhere.

   The set this replaces drew "the row that will be there", which is a good
   instinct and a bad result: a row is a row, so plans, people, locations and
   job classes all came out as two grey bars in a card. An empty screen is the
   only screen with room for a real drawing, and it is the one a broker sees
   first, so it is worth drawing properly.

   Rules the set keeps to, so eight drawings still read as one product:
     one canvas, 152 x 112, sitting on a soft ground shadow
     one mist palette for everything that is context
     one teal element per drawing, and only one, so the eye lands somewhere
     no images, no icon font, no network request: about 6KB of CSS for all of it
   ========================================================================== */

.mv {
  position: relative;
  width: 152px;
  height: 112px;
  margin: 0 auto 20px;
  user-select: none;
  flex: none;
}
.mv * { box-sizing: border-box; }

/* The ground. Without it each drawing floats in the middle of nothing, which
   is the exact feeling an empty state is trying not to give. */
.mv::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 104px;
  height: 12px;
  margin-left: -52px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18,88,83,.11) 0%, rgba(18,88,83,0) 72%);
}

@media (prefers-reduced-motion: no-preference) {
  .mv { animation: mv-in .42s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes mv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- PLANS -----------------------------------------------------------
   A set of plans, not a list of rows: three cards fanned, the front one
   carrying a carrier mark and a price. The fan is what says "a set". */
.mv-plan .c {
  position: absolute; left: 50%; top: 50%;
  width: 108px; height: 70px; margin: -35px 0 0 -54px;
  background: #fff; border: 1px solid #e4eaef; border-radius: 12px;
}
.mv-plan .c3 { transform: rotate(-13deg) translate(-4px, 4px); background: #f1f4f7; border-color: #e2e8ee; }
.mv-plan .c2 { transform: rotate(7deg) translate(4px, 2px); background: #f8fafc; border-color: #e6ebf0; }
.mv-plan .c1 { box-shadow: 0 8px 18px -8px rgba(16,24,40,.22); }
.mv-plan .tile {
  position: absolute; left: 13px; top: 13px;
  width: 24px; height: 24px; border-radius: 8px; background: #1f8f88;
  box-shadow: 0 3px 8px -3px rgba(31,143,136,.6);
}
/* a shield notch inside the carrier tile: benefits, drawn small */
.mv-plan .tile::after {
  content: ""; position: absolute; left: 50%; top: 6px;
  width: 11px; height: 12px; margin-left: -5.5px;
  background: #fff; border-radius: 3px 3px 5px 5px;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
.mv-plan .l { position: absolute; left: 45px; height: 6px; border-radius: 3px; background: #e7ecf1; }
.mv-plan .l.a { top: 16px; width: 46px; }
.mv-plan .l.b { top: 27px; width: 30px; background: #f0f3f6; }
.mv-plan .price {
  position: absolute; left: 13px; bottom: 13px;
  width: 42px; height: 10px; border-radius: 5px; background: #e7ecf1;
}
.mv-plan .tier {
  position: absolute; right: 13px; bottom: 13px;
  width: 26px; height: 10px; border-radius: 999px; background: #f0f3f6;
}

/* ---- DOCUMENTS -------------------------------------------------------
   Sheets with a turned corner, and the one thing you can do to them. */
.mv-doc .p {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 84px; margin: -42px 0 0 -34px;
  background: #fff; border: 1px solid #e4eaef; border-radius: 9px;
}
.mv-doc .p3 { transform: rotate(-11deg) translate(-9px, 2px); background: #f6f8fa; border-color: #e9eef3; }
.mv-doc .p2 { transform: rotate(6deg) translate(7px, 1px); background: #fbfcfd; }
.mv-doc .p1 { box-shadow: 0 8px 18px -8px rgba(16,24,40,.22); overflow: hidden; }
/* the fold. Two triangles: the cut-away and the leaf lying on top of it */
.mv-doc .p1::before {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 19px 19px 0; border-style: solid;
  border-color: #fff #fff #eef2f6 #eef2f6;
}
.mv-doc .t { position: absolute; left: 12px; height: 5px; border-radius: 3px; background: #e7ecf1; }
.mv-doc .t1 { top: 30px; width: 30px; }
.mv-doc .t2 { top: 42px; width: 44px; background: #edf1f5; }
.mv-doc .t3 { top: 54px; width: 38px; background: #f0f3f6; }
.mv-doc .t4 { top: 66px; width: 24px; background: #f2f5f7; }
.mv-doc .up {
  position: absolute; right: 16px; bottom: 10px;
  width: 30px; height: 30px; border-radius: 50%; background: #1f8f88;
  box-shadow: 0 5px 12px -4px rgba(31,143,136,.65), 0 0 0 4px #fff;
}
.mv-doc .up::before {
  content: ""; position: absolute; left: 50%; top: 9px;
  width: 2px; height: 12px; margin-left: -1px; background: #fff; border-radius: 1px;
}
.mv-doc .up::after {
  content: ""; position: absolute; left: 50%; top: 11px;
  width: 8px; height: 8px; margin-left: -4px;
  border-left: 2px solid #fff; border-top: 2px solid #fff;
  border-radius: 1px 0 0 0; transform: rotate(45deg);
}

/* ---- LOCATIONS -------------------------------------------------------
   A fragment of map with a pin standing on it. The roads are what make it
   a map; without them a pin on a rectangle is a pin on a rectangle. */
.mv-place .map {
  position: absolute; left: 50%; top: 50%;
  width: 124px; height: 80px; margin: -40px 0 0 -62px;
  background: #fff; border: 1px solid #e4eaef; border-radius: 13px;
  overflow: hidden; box-shadow: 0 8px 18px -8px rgba(16,24,40,.2);
}
.mv-place .road { position: absolute; background: #eef2f6; }
.mv-place .r1 { left: 0; right: 0; top: 47px; height: 9px; }
.mv-place .r2 { top: 0; bottom: 0; left: 26px; width: 8px; }
.mv-place .blk { position: absolute; background: #f5f8fa; border-radius: 3px; }
.mv-place .b1 { left: 44px; top: 12px; width: 28px; height: 24px; }
.mv-place .b2 { left: 82px; top: 12px; width: 26px; height: 24px; }
.mv-place .b3 { left: 6px; top: 12px; width: 12px; height: 24px; }
.mv-place .b4 { left: 44px; top: 64px; width: 40px; height: 10px; }
.mv-place .b5 { left: 6px; top: 64px; width: 12px; height: 10px; }
/* the pin sits outside the map box so its shadow is not clipped */
.mv-place .pin {
  position: absolute; left: 50%; top: 15px; margin-left: 0;
  width: 30px; height: 30px; background: #1f8f88;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 3px -3px 12px -4px rgba(31,143,136,.75);
}
.mv-place .pin::after {
  content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%;
}

/* ---- PEOPLE ----------------------------------------------------------
   Three, overlapping, each cut out of the one behind it. */
.mv-people .av {
  position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px;
  border-radius: 50%; background: #e7ecf1; overflow: hidden;
  box-shadow: 0 0 0 4px #fff;
}
.mv-people .av::before {
  content: ""; position: absolute; left: 50%; top: 10px;
  width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #fff;
}
.mv-people .av::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 27px; height: 16px; margin-left: -13.5px;
  border-radius: 14px 14px 0 0; background: #fff;
}
.mv-people .a1 { left: 16px; }
.mv-people .a3 { left: 88px; background: #edf1f5; }
.mv-people .a2 {
  left: 52px; z-index: 2; background: #1f8f88;
  box-shadow: 0 0 0 4px #fff, 0 7px 16px -6px rgba(31,143,136,.6);
}

/* ---- JOB CLASSES -----------------------------------------------------
   Rows gathered by a brace. The brace is the whole idea: a job class is
   not a row, it is the thing that holds rows together. */
.mv-group .t {
  position: absolute; left: 52px; height: 22px; border-radius: 7px;
  background: #fff; border: 1px solid #e4eaef;
}
.mv-group .t1 { top: 16px; width: 84px; }
.mv-group .t2 { top: 45px; width: 68px; background: #fbfcfd; }
.mv-group .t3 { top: 74px; width: 78px; background: #fbfcfd; }
.mv-group .t::after {
  content: ""; position: absolute; left: 9px; top: 50%; margin-top: -3px;
  width: 30px; height: 6px; border-radius: 3px; background: #eef2f6;
}
.mv-group .br {
  position: absolute; left: 30px; top: 16px; bottom: 16px; width: 14px;
  border: 2px solid #c3d9d6; border-right: 0; border-radius: 8px 0 0 8px;
}
.mv-group .br::after {
  content: ""; position: absolute; left: -12px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%; background: #1f8f88;
  box-shadow: 0 4px 10px -3px rgba(31,143,136,.6);
}

/* ---- COBRA -----------------------------------------------------------
   A person and a clock. A COBRA event is a person on a deadline, which is
   a different thing from a person, and it should not be drawn the same. */
.mv-cobra .av {
  position: absolute; left: 50%; top: 20px; margin-left: -29px;
  width: 58px; height: 58px; border-radius: 50%; background: #e7ecf1;
  overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 8px 18px -8px rgba(16,24,40,.22);
}
.mv-cobra .av::before {
  content: ""; position: absolute; left: 50%; top: 12px;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff;
}
.mv-cobra .av::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 33px; height: 19px; margin-left: -16.5px;
  border-radius: 17px 17px 0 0; background: #fff;
}
.mv-cobra .clk {
  position: absolute; left: 50%; top: 58px; margin-left: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 2.5px solid #1f8f88;
  box-shadow: 0 6px 14px -5px rgba(31,143,136,.6);
}
.mv-cobra .clk::before,
.mv-cobra .clk::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: #1f8f88; border-radius: 2px; transform-origin: 0 50%;
}
.mv-cobra .clk::before { width: 10px; height: 2.5px; margin-top: -1.25px; transform: rotate(-58deg); }
.mv-cobra .clk::after  { width: 12px; height: 2.5px; margin-top: -1.25px; transform: rotate(14deg); }

/* ---- ONBOARDING FLOW, NOT BUILT --------------------------------------
   The thing you are being asked to make, drawn half-made: a first step
   that exists and three that are still outlines. */
.mv-flow .node {
  position: absolute; border-radius: 8px;
  background: #fff; border: 1.5px solid #e4eaef;
}
.mv-flow .root {
  left: 50%; top: 6px; margin-left: -29px; width: 58px; height: 24px;
  background: #1f8f88; border-color: #1f8f88;
  box-shadow: 0 5px 12px -4px rgba(31,143,136,.55);
}
.mv-flow .root::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 5px; margin: -2.5px 0 0 -12px;
  border-radius: 3px; background: rgba(255,255,255,.85);
}
.mv-flow .s { top: 72px; width: 34px; height: 28px; border-style: dashed; }
.mv-flow .s1 { left: 12px; }
.mv-flow .s2 { left: 59px; }
.mv-flow .s3 { left: 106px; }
.mv-flow .s::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 4px; margin: -2px 0 0 -7px;
  border-radius: 2px; background: #eef2f6;
}
/* the rails: one stem down from the root, one spine, three drops */
.mv-flow .stem {
  position: absolute; left: 50%; top: 30px; width: 2px; height: 16px;
  margin-left: -1px; background: #dfe6ec;
}
.mv-flow .spine {
  position: absolute; left: 29px; right: 29px; top: 46px; height: 2px; background: #dfe6ec;
}
.mv-flow .drop { position: absolute; top: 46px; width: 2px; height: 26px; background: #dfe6ec; }
.mv-flow .d1 { left: 28px; }
.mv-flow .d2 { left: 75px; margin-left: 0; }
.mv-flow .d3 { left: 122px; }

/* ---- INVITE ----------------------------------------------------------
   The flow is built; what is missing is a person in it. A slot, and the
   thing that fills it. */
.mv-invite .card {
  position: absolute; left: 50%; top: 50%;
  width: 116px; height: 74px; margin: -37px 0 0 -58px;
  background: #fff; border: 1px solid #e4eaef; border-radius: 13px;
  box-shadow: 0 8px 18px -8px rgba(16,24,40,.22);
}
.mv-invite .slot {
  position: absolute; left: 14px; top: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px dashed #cfdbe4;
}
.mv-invite .l { position: absolute; left: 58px; height: 6px; border-radius: 3px; background: #e7ecf1; }
.mv-invite .l.a { top: 22px; width: 42px; }
.mv-invite .l.b { top: 34px; width: 28px; background: #f0f3f6; }
.mv-invite .steps { position: absolute; left: 14px; right: 14px; bottom: 13px; display: flex; gap: 4px; }
.mv-invite .steps i { flex: 1; height: 4px; border-radius: 999px; background: #eef2f6; }
.mv-invite .send {
  position: absolute; right: 8px; bottom: 6px;
  width: 34px; height: 34px; border-radius: 50%; background: #1f8f88;
  box-shadow: 0 6px 14px -5px rgba(31,143,136,.7), 0 0 0 4px #fff;
}
/* a paper plane, drawn as one triangle with a notch cut out of its tail */
.mv-invite .send::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  background: #fff;
  clip-path: polygon(100% 0, 0 42%, 42% 55%, 55% 100%);
}

/* ==========================================================================
   EMAILS OVERVIEW: THE SENT LIST BEFORE IT HAS ANYTHING IN IT
   Overview's job is to show what has gone out. Before anything has, the tab
   said so in one grey sentence and stopped, which left the page looking like
   it had failed to load rather than like a company that has not sent an email
   yet. The table stands there instead, with its real columns and the shape of
   three rows in it, so a broker can see what this page is going to tell them.
   ========================================================================== */
body.em-embed .em-ghost-card .em-table thead th { color: #9aa6b2; }
body.em-embed .em-ghost-rows td { vertical-align: middle; }
body.em-embed .em-ghost-rows .g {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #eef2f6;
}
body.em-embed .em-ghost-rows .g.s { height: 6px; margin-top: 6px; background: #f3f6f8; }
body.em-embed .em-ghost-rows .g.p { height: 18px; border-radius: 999px; background: #f0f3f6; }
body.em-embed .em-ghost-rows tr:nth-child(2) .g { opacity: .7; }
body.em-embed .em-ghost-rows tr:nth-child(3) .g { opacity: .42; }
body.em-embed .em-ghost-rows tr:hover { background: transparent !important; }
body.em-embed .em-ghost-note {
  margin: 0;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--mint-btn-line);
  font-size: 0.82rem;
  color: #94a3b8;
}

/* ---- the readiness ring's label ----
   The wrap was pinned to 84px but its <svg> kept the 96px it was built at, so
   the drawing overflowed the box by 12px and its centre sat 6px down and 6px
   right of the box's centre. The label is positioned against the box, so it
   read 6px up and left of the ring it is supposed to sit inside. The svg
   follows the box now instead of holding its old size.

   The sub-label also carries letter-spacing, which adds a trailing gap after
   the last letter that centring then counts as part of the word. Half of that
   spacing comes back off the right so READY sits on the same axis as 25%. */
body #tab-aca .aca-ring-wrap > svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
body #tab-aca .aca-ring-sub { margin-right: -.1em; }

/* ==========================================================================
   MINT-SKELETON-V2
   The bar. Everything else about a skeleton row comes from the real table,
   because a skeleton row IS a real table row; the only thing this file has to
   get right is the mark that stands in for a piece of text.

   inline-block, not block. A block bar collapses the cell's line box to the
   bar's own height, so a skeleton row renders shorter than the row that
   replaces it and the page jumps when data lands: the exact fault a skeleton
   is there to prevent. An inline-block sits inside the cell's own strut, so
   the row keeps the height its text would have given it.
   ========================================================================== */
body .sk-b {
  display: inline-block;
  vertical-align: middle;
  height: 10px;
  min-width: 10px;
  border-radius: 5px;
  background-color: #eef1f4;
  position: relative;
  overflow: hidden;
}
body .sk-b.sk-pill   { height: 22px; border-radius: 999px; }
body .sk-b.sk-box    { width: 16px; height: 16px; border-radius: 4px; }
body .sk-b.sk-btn    { width: 34px; height: 34px; border-radius: 9px; }
/* The strongest form of the rule: a real control becomes its own placeholder
   by keeping every class it has and adding this one. Size, radius, padding and
   MARGIN all stay the control's own, which is what a hand-drawn stand-in keeps
   getting wrong: the location card was ten pixels short because the copy button
   carries a margin its substitute did not.

   No .skeleton class on these. .skeleton sets a 7px radius at the same
   specificity as most control classes, so adding it would fight the very
   geometry this is here to inherit. The sheen is restated instead. */
body .sk-ghost {
  background-color: #eef1f4 !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  cursor: default !important;
  position: relative;
  overflow: hidden;
}
body .sk-ghost:hover {
  background-color: #eef1f4 !important;
  color: transparent !important;
  box-shadow: none !important;
}
body .sk-ghost > * { visibility: hidden; }
body .sk-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.58) 45%,
    rgba(31,143,136,.10) 60%,
    rgba(255,255,255,0) 100%);
  animation: mint-sheen 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
@media (prefers-reduced-motion: reduce) { body .sk-ghost::after { animation: none; opacity: 0; } }
body .sk-b.sk-tile   { width: 28px; height: 28px; border-radius: 8px; flex: none; }
body .sk-b.sk-dot    { width: 20px; height: 20px; border-radius: 50%; }
body .sk-b.sk-chip   { width: 74px; height: 26px; border-radius: 7px; }
body .sk-b.sk-cta    { width: 116px; height: 22px; border-radius: 7px; }
/* Holds a bar at the height of the line it replaces, for rows whose own box
   would otherwise collapse to the bar. */
body .sk-fit { display: flex; align-items: center; }
body .sk-b.sk-avatar-lg { width: 40px; height: 40px; border-radius: 50%; flex: none; }

/* The leading cell of a row that carries an icon beside its name: the tile and
   the bar sit on one baseline, and the bar takes the rest of the cell. */
body .sk-lead { display: flex; align-items: center; gap: 10px; }
body .sk-lead > .sk-b:last-child { flex: 0 1 auto; }

/* The action cluster keeps the real row's gap so the cell measures the same
   whether it holds buttons or their placeholders. */
body .sk-btns { display: inline-flex; gap: 4px; justify-content: center; align-items: center; }

/* A skeleton row is not interactive, so it does not respond to the pointer.
   A row that lights up under the cursor and then cannot be clicked is worse
   than a row that does nothing. */
body tr.sk-tr,
body tr.sk-tr:hover { background: transparent !important; cursor: default !important; }
body .sk-card-shell,
body .sk-card-shell:hover {
  cursor: default !important;
  box-shadow: none !important;
  border-color: var(--mint-btn-line) !important;
}

/* The sheen rides the bar, never the bar's own box: a transform on the box
   would make it a containing block and trap anything positioned inside it. */
body .sk-b::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.58) 45%,
    rgba(31,143,136,.10) 60%,
    rgba(255,255,255,0) 100%);
  animation: mint-sheen 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
/* Rows further down the list are further from the eye, so they sit back. The
   list reads as one thing arriving rather than eight things flashing. */
body tr.sk-tr:nth-child(n+4) .sk-b { opacity: .78; }
body tr.sk-tr:nth-child(n+6) .sk-b { opacity: .58; }
body .sk-card-shell:nth-child(2) .sk-b { opacity: .78; }
body .sk-card-shell:nth-child(n+3) .sk-b { opacity: .58; }

@media (prefers-reduced-motion: reduce) {
  body .sk-b::after { animation: none; opacity: 0; }
}
@media print {
  body .sk-b { display: none !important; }
}

/* ==========================================================================
   EMPLOYEES: THE ENROLL COLUMN
   The action cluster is centred, and it is not always the same width: a row
   whose employee has no email loses the resend button, a finished row swaps
   Enroll for the Completed mark. Centring a cluster of changing width puts
   every row's last control on a different axis, which is why the Enroll
   buttons do not line up and why Completed sits off to one side of them.

   Anchored to the end instead. The cell's right edge does not move, so every
   Enroll, every Completed and every Waived in the table shares one axis, and
   the icons that come and go do so on the left of the cluster where nothing
   depends on them.
   ========================================================================== */
body #tab-employees tbody td:last-child > div[style*="justify-content"] {
  justify-content: flex-end !important;
}

/* ==========================================================================
   NEW HIRES
   The card had the right parts in the right order and none of them had any
   rank: an avatar in one of five arbitrary pastels, a status chip floating at
   the far edge, a rail drawn in a green the product does not use, an expiry
   set in the palest text on the card, and five actions of identical weight
   with the destructive one among them. Everything shouted equally, which is
   what makes a screen read as generated rather than made.

   The pass below gives the card a spine: who, how far, what is wrong, what to
   do. Nothing is added and nothing is taken away; the weights change.
   ========================================================================== */

body #tab-newhires .nh-card {
  border-color: #e8edf2 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
body #tab-newhires .nh-card:hover {
  border-color: #cfdae4 !important;
  box-shadow: 0 6px 18px -8px rgba(16,24,40,.16) !important;
}

/* The three zones. The card was one undivided pad, so the rail and the action
   row sat at the same level as the person's name. */
body #tab-newhires .nh-card-top { padding: 16px 20px 0; margin-bottom: 14px !important; }
body #tab-newhires .nh-step-timeline { padding: 0 20px; margin-bottom: 0 !important; }
body #tab-newhires .nh-card-dates { padding: 12px 20px 0; }

/* ---- who ----
   One avatar treatment, not five. Colour keyed off a name is a decoration that
   carries no information and it is the loudest thing in a list of ten cards. */
body #tab-newhires .nh-avatar {
  background: linear-gradient(180deg, #eaf4f3 0%, #dfeeec 100%) !important;
  color: #125853 !important;
  border-radius: 11px !important;
  font-size: 0.8rem !important;
  box-shadow: inset 0 0 0 1px rgba(18,88,83,.10);
}
body #tab-newhires .nh-card-name {
  font-size: 0.975rem !important;
  font-weight: 600 !important;
  color: #12302e !important;
  letter-spacing: -.012em;
}
body #tab-newhires .nh-card-meta { font-size: 0.79rem !important; color: #8fa0b0 !important; margin-top: 3px !important; }

/* The badge survives only on the two statuses the rail cannot express, so it
   needs no colour of its own: nothing is being distinguished from anything. */
body #tab-newhires .nh-card-badge {
  border: 0 !important;
  background: #f1f5f9 !important;
  color: #7c8b99 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  align-self: center;
}

/* ---- how far ----
   One green. The rail was drawing done steps in #10b981 and the current step
   in the brand teal, so a single line of seven dots carried two greens. */
body #tab-newhires .nh-step-timeline {
  padding-top: 8px;
  padding-bottom: 20px;
}
/* The rail is the thing a broker actually reads on this card, and it was
   drawn at the size of a decoration: a 2px line and 16px dots with 11px
   labels. It is the content now. */
body #tab-newhires .nh-step-dot-row { height: 26px !important; }
body #tab-newhires .nh-step-line { height: 3px !important; border-radius: 2px; background: #e6ebf0 !important; }
/* Each step draws its own segment, and at 3px the sub-pixel gap where two of
   them meet shows as a nick in the line. Every segment but the last reaches a
   pixel further right so the joins close. `left` is left alone: the first
   item's line starts at its own dot and must keep doing so. */
body #tab-newhires .nh-step-item:not(:last-child) .nh-step-line { right: -1px; }
body #tab-newhires .nh-step-line.done { background: var(--mint-btn-brand) !important; }

/* The segment carrying the step in play. A barber stripe was tried here and it
   was wrong twice over: at 3px tall an angled stripe renders as a row of
   dashes rather than as stripes, and because the striped segment starts
   halfway between two dots it met the solid line before it at a hard seam. It
   read as a rendering fault.

   The line is simply true instead. Teal up to the dot, grey after it, which is
   exactly what a half-finished step is, and it joins the segment before it
   with no seam because it is the same teal. The motion moves to a soft sheen
   travelling the teal half: the same mark the skeletons use, so it is a
   language the page already speaks rather than a new one. */
body #tab-newhires .nh-step-line.current {
  background-color: transparent !important;
  background-image: linear-gradient(90deg,
    var(--mint-btn-brand) 0 50%,
    #e6ebf0 50% 100%) !important;
  overflow: hidden;
}
body #tab-newhires .nh-step-line.current::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 50%;
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: nh-flow 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes nh-flow { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  body #tab-newhires .nh-step-line.current::after { animation: none; opacity: 0; }
}

body #tab-newhires .nh-step-dot {
  width: 20px !important; height: 20px !important;
  border-width: 2px !important; border-color: #dfe6ec !important;
  color: #b9c4cf !important;
  font-size: 10px !important;
  font-weight: 600;
}
body #tab-newhires .nh-step-dot.done {
  background: var(--mint-btn-brand) !important;
  border-color: var(--mint-btn-brand) !important;
  box-shadow: 0 1px 2px rgba(18,88,83,.22);
}
body #tab-newhires .nh-step-dot.done i { font-size: 9px !important; }
/* The step in play is the one thing on the rail worth finding, so it is the
   only one bigger than its neighbours. */
body #tab-newhires .nh-step-dot.active {
  width: 26px !important; height: 26px !important;
  border-width: 2.5px !important;
  border-color: var(--mint-btn-brand) !important;
  color: var(--mint-btn-brand) !important;
  font-weight: 700;
  font-size: 11px !important;
  box-shadow: 0 0 0 5px rgba(31,143,136,.11) !important;
}
body #tab-newhires .nh-step-label { font-size: 0.75rem !important; margin-top: 11px !important; color: #a3b1bd !important; max-width: 84px !important; }
body #tab-newhires .nh-step-label.done { color: #7c8b99 !important; }
body #tab-newhires .nh-step-label.active { color: var(--mint-btn-brand) !important; font-weight: 650 !important; }

/* ---- what is wrong ----
   An expired invite is the reason a card needs attention, and it was set in
   11px red beside an unrelated scheduling rule. It becomes a mark you cannot
   miss; the rule beside it stays a footnote. */
body #tab-newhires .nh-card-dates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body #tab-newhires .nh-date-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; color: #93a3b1;
}
body #tab-newhires .nh-date-item i { font-size: 11px; opacity: .8; }
body #tab-newhires .nh-date-item.nh-date-warn {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fdf0e3 !important;
  color: #9a5b12 !important;
  font-weight: 600;
}
body #tab-newhires .nh-date-item.nh-date-warn i { opacity: 1; }

/* ---- what to do ----
   A real footer, on its own ground, rather than a hairline and more of the
   same card. */
body #tab-newhires .nh-card-action {
  margin-top: 14px;
  padding: 12px 20px !important;
  border-top: 1px solid #eef2f6 !important;
  background: #fbfcfd;
  gap: 14px;
}
body #tab-newhires .nh-card-action-msg { font-size: 0.79rem !important; color: #7c8b99 !important; }

/* The first action is the one the card is asking for. The rest are
   housekeeping and read as housekeeping: no border, no fill, colour only
   when you reach for them. */
body #tab-newhires .nh-card-action-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: #7c8b99 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
body #tab-newhires .nh-card-action-btn:hover {
  background: rgba(18,88,83,.06) !important;
  color: #12302e !important;
}
body #tab-newhires .nh-card-action > div > .nh-card-action-btn:first-child {
  color: #fff !important;
  background-color: var(--mint-btn-brand) !important;
  background-image: linear-gradient(180deg, var(--mint-btn-brand-top) 0%, var(--mint-btn-brand) 100%) !important;
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10) !important;
  padding: 0 15px !important;
  margin-right: 4px;
}
body #tab-newhires .nh-card-action > div > .nh-card-action-btn:first-child:hover {
  background-image: linear-gradient(180deg, var(--mint-btn-brand-edge) 0%, var(--mint-btn-brand) 100%) !important;
  color: #fff !important;
}
/* Removing someone is the one thing here that cannot be undone, so it keeps
   its colour rather than borrowing the row's grey. */
body #tab-newhires .nh-card-action-btn[style*="b91c1c"] { color: #b4524b !important; }
body #tab-newhires .nh-card-action-btn[style*="b91c1c"]:hover {
  color: #a3332b !important;
  background: rgba(224,82,74,.09) !important;
}

/* ---- the page's own furniture ---- */
body #tab-newhires .nh-stage-rail,
body #tab-newhires .nh-stages { background: transparent !important; }
body #tab-newhires .nh-summary-line { font-size: 0.82rem; color: #8fa0b0; }

/* ---- the tab's own header pair ----
   A 34px grey square with a cog next to a 44px branded button read as a
   leftover rather than a pair. It carries its name now and stands at the same
   height, so the two of them look like one decision. */
body #tab-newhires .nh-configure-btn {
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  gap: 9px;
  border: 0 !important;
  border-radius: 12px !important;
  font-family: inherit;
  font-size: 0.92rem !important;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--mint-btn-ink) !important;
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05) !important;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}
body #tab-newhires .nh-configure-btn:hover {
  color: #0f172a !important;
  background-image: linear-gradient(180deg, #fff 0%, #f6f8fa 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12) !important;
}
body #tab-newhires .nh-configure-btn > i { font-size: 0.95em; opacity: .75; }
body #tab-newhires .nh-header-right { gap: 10px; align-items: center; }
@media (max-width: 720px) {
  body #tab-newhires .nh-configure-btn > span { display: none; }
  body #tab-newhires .nh-configure-btn { padding: 0 14px !important; }
}

/* A placeholder dot on the step rail: the real dot is a hollow ring, so a
   transparent border would leave nothing at all. It fills instead. */
body #tab-newhires .nh-step-dot.sk-ghost {
  border-color: transparent !important;
  background-color: #e4e9ee !important;
}
body #tab-newhires .nh-avatar.sk-ghost { background-image: none !important; box-shadow: none !important; }
body #tab-newhires .nh-card-action-btn.sk-ghost,
body #tab-newhires .nh-card-action > div > .nh-card-action-btn.sk-ghost:first-child {
  background-image: none !important;
  background-color: #eef1f4 !important;
  color: transparent !important;
  box-shadow: none !important;
}

/* ---- DEPENDENTS ------------------------------------------------------
   A person and the people attached to them, which is what a dependent is.
   Not the same drawing as "employees": that one is a row of peers. */
.mv-family .av {
  position: absolute; border-radius: 50%; background: #e7ecf1;
  overflow: hidden; box-shadow: 0 0 0 4px #fff;
}
.mv-family .av::before {
  content: ""; position: absolute; left: 50%; top: 21%;
  width: 30%; height: 30%; margin-left: -15%; border-radius: 50%; background: #fff;
}
.mv-family .av::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 56%; height: 34%; margin-left: -28%;
  border-radius: 40px 40px 0 0; background: #fff;
}
.mv-family .a1 {
  left: 26px; top: 20px; width: 56px; height: 56px;
  background: #1f8f88; box-shadow: 0 0 0 4px #fff, 0 8px 18px -7px rgba(31,143,136,.55);
  z-index: 2;
}
.mv-family .a2 { left: 74px; top: 44px; width: 38px; height: 38px; }
.mv-family .a3 { left: 100px; top: 24px; width: 32px; height: 32px; background: #edf1f5; }

/* ---- BENEFICIARIES ---------------------------------------------------
   A share, drawn as a share. The arc is a real conic sweep rather than a
   picture of one, so 60/40 is actually 60/40. */
.mv-split .ring {
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #1f8f88 0 60%, #dfe6ec 60% 100%);
  box-shadow: 0 8px 20px -10px rgba(16,24,40,.3);
}
.mv-split .ring::after {
  content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #fff;
}
/* the two names the shares belong to, tucked against the ring */
.mv-split .tag {
  position: absolute; height: 22px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 8px -2px rgba(16,24,40,.18), inset 0 0 0 1px #eef2f6;
  display: flex; align-items: center; gap: 6px; padding: 0 9px 0 5px;
}
.mv-split .tag > i { width: 12px; height: 12px; border-radius: 50%; flex: none; display: block; }
.mv-split .tag > b { display: block; height: 5px; border-radius: 3px; background: #e7ecf1; }
.mv-split .t1 { left: 2px; top: 20px; }
.mv-split .t1 > i { background: #1f8f88; }
.mv-split .t1 > b { width: 26px; }
.mv-split .t2 { right: 2px; bottom: 20px; }
.mv-split .t2 > i { background: #cfd8e1; }
.mv-split .t2 > b { width: 20px; }

/* ---- HISTORY ---------------------------------------------------------
   Entries hanging off a rail, oldest under newest. */
.mv-time .rail { position: absolute; left: 34px; top: 16px; bottom: 16px; width: 2px; background: #e7ecf1; }
.mv-time .ev {
  position: absolute; left: 50px; right: 12px; height: 26px;
  background: #fff; border: 1px solid #e4eaef; border-radius: 8px;
}
.mv-time .ev::after {
  content: ""; position: absolute; left: 10px; top: 50%; margin-top: -3px;
  height: 6px; border-radius: 3px; background: #eef2f6;
}
.mv-time .e1 { top: 12px; }
.mv-time .e1::after { width: 54%; }
.mv-time .e2 { top: 45px; background: #fbfcfd; }
.mv-time .e2::after { width: 40%; }
.mv-time .e3 { top: 78px; background: #fbfcfd; }
.mv-time .e3::after { width: 48%; }
.mv-time .dot {
  position: absolute; left: 28px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px #dfe6ec;
}
.mv-time .d1 {
  top: 18px; background: #1f8f88; box-shadow: 0 0 0 4px rgba(31,143,136,.13);
}
.mv-time .d2 { top: 51px; }
.mv-time .d3 { top: 84px; }

/* ==========================================================================
   EMAILS, STANDALONE: THE SUB-NAV JOINS THE PAGE
   Library, Enrollments and the company page all weld their tabs to the bottom
   of the header band, so the active one opens into the content. This page had
   a recessed pill track floating in the middle of the band instead, which is
   why the two pages read as different products with the same chrome.

   Scoped away from the embedded frame, which is a different arrangement
   entirely: in there the sub-nav is an underline row inside a company's tab.
   ========================================================================== */
body:not(.em-embed):not(.em-standalone) .docs-subtab-bar { padding-bottom: 0 !important; }
body:not(.em-embed):not(.em-standalone) .docs-subtab-bar-inner {
  align-items: flex-end !important;
  padding-bottom: 0 !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab-track {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  gap: 2px !important;
  align-items: flex-end !important;
  height: 44px !important;
  box-shadow: none !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab:hover { background: rgba(255, 255, 255, .45) !important; }
/* The fill is the colour of what it opens into, which on this page is white.
   No bottom edge: that is what makes it a tab rather than a chip. */
body:not(.em-embed):not(.em-standalone) .docs-subtab.active,
body:not(.em-embed):not(.em-standalone) .docs-subtab.active:hover {
  height: 44px !important;
  background: #ffffff !important;
  color: #125853 !important;
  font-weight: 650 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(18,88,83,.09),
    -1px 0 0 rgba(18,88,83,.09),
    1px 0 0 rgba(18,88,83,.09) !important;
}
/* The row's other controls sit on the band, not on its edge, so they lift. */
body:not(.em-embed):not(.em-standalone) .docs-subtab-bar-inner > .page-header-right { margin-bottom: 11px; }

/* ==========================================================================
   EMAILS: THE AUDIENCE PRESETS
   The condition builder can express everything a broker needs, because the
   backend carries 21 fields of Mint's own data: enrollment status, hire date,
   eligibility date, dependents, job class, location, engagement. None of that
   was discoverable. The step opened on an empty builder and a dropdown, so the
   tool read as a mailing-list product that happened to live inside Mint, and
   the door people found instead was Contacts, which is for the few people Mint
   does NOT know about.

   These chips are the sends a benefits broker actually makes, each one a real
   condition over data already on file. Picking one is the same as building it
   by hand; the builder stays open underneath so it can be adjusted.
   ========================================================================== */
body .em-preset-lead {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #7c8b99;
  max-width: 62ch;
}
body .em-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
body .em-preset {
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 550;
  color: var(--mint-btn-ink);
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line),
    0 1px 2px rgba(16,24,40,.05);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
body .em-preset:hover {
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--mint-btn-line-hover),
    0 3px 8px -2px rgba(16,24,40,.12);
}
body .em-preset.on {
  color: #fff;
  background-image: linear-gradient(180deg, var(--mint-btn-brand-top) 0%, var(--mint-btn-brand) 100%);
  box-shadow:
    inset 0 1px 0 0 var(--mint-btn-brand-edge),
    0 0 0 1px var(--mint-btn-brand-press),
    0 1px 2px rgba(16,24,40,.10);
}
body .em-preset-clear {
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: #94a3b8;
}
body .em-preset-clear:hover { background: rgba(18,88,83,.06); box-shadow: none; color: #12302e; }

/* The source tag on a row this tab does not own. An employee comes from the
   census and a company admin from the company record; neither is edited here,
   so where the pencil and the bin would be, the row says where it came from
   instead of offering controls that would lie. */
body .em-src-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  background: #f1f5f9;
  color: #7c8b99;
}
body .em-src-tag.em-src-employee { background: #e6f2f1; color: #14615c; }
body .em-src-tag.em-src-dm { background: #eef2f6; color: #5b6b7a; }

/* ==========================================================================
   EMAILS: WHO A ROW IS ABOUT
   Eight columns of text told you nothing at a glance. Mint already stores a
   company's logo and everyone's name, so a row about a person carries that
   person's initials and a row's company carries its own mark. Initials, never
   a generic glyph: the same grey square repeated down a column is decoration.
   ========================================================================== */
body .em-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
body .em-who-text { min-width: 0; }
body .em-avatar {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(180deg, #eaf4f3 0%, #dfeeec 100%);
  color: #125853;
  box-shadow: inset 0 0 0 1px rgba(18,88,83,.10);
}
/* A decision maker is a different kind of person from an employee, so the mark
   says so quietly rather than with another badge. */
body .em-avatar-dm { background: linear-gradient(180deg, #eef2f6 0%, #e6ebf1 100%); color: #55677a; box-shadow: inset 0 0 0 1px rgba(71,85,105,.12); }
body .em-avatar-contact { background: linear-gradient(180deg, #f5f7fa 0%, #eef2f6 100%); color: #7c8b99; box-shadow: inset 0 0 0 1px rgba(100,116,139,.10); }

body .em-who-co { gap: 8px; }
body .em-co-logo {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mint-btn-line);
}
body .em-co-initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: #8fa0b0; letter-spacing: .02em;
  background: #f4f7f9;
}

/* ==================================================================
   ONE SUB-TAB LOOK (company page)

   Documents and Benefits had drifted apart: different type size,
   different resting colour, and the Documents row had picked up a
   raised card on the active item while Benefits stayed an underline.
   Sub-level is underline-on-the-band everywhere, never a tile. The
   card belongs to the page tabs above, and that contrast is the
   whole point of having two levels.

   Scoped away from body.em-embed, which has its own tuned set.
   ================================================================== */
body:not(.em-embed):not(.em-standalone) .docs-subtab,
body:not(.em-embed) .benefits-subtab {
  padding: 14px 0 !important;
  margin-right: 24px;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab:hover,
body:not(.em-embed) .benefits-subtab:hover {
  color: #1f8f88 !important;
  background: transparent !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab.active,
body:not(.em-embed) .benefits-subtab.active {
  color: #1f8f88 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab.active::after,
body:not(.em-embed) .benefits-subtab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 0;
  background: #1f8f88;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab.active::before,
body:not(.em-embed) .benefits-subtab.active::before {
  display: none !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab > i,
body:not(.em-embed) .benefits-subtab > i {
  margin-right: 7px;
  opacity: 0.7;
  font-size: 0.9em;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab-bar,
body:not(.em-embed) .benefits-subtab-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* The square on a clicked sub-tab was the browser's default focus ring on a
   bare <button>, not a card. Suppress it for pointer focus, keep a real ring
   for keyboard users so the bar stays navigable. */
body:not(.em-embed):not(.em-standalone) .docs-subtab:focus,
body:not(.em-embed) .benefits-subtab:focus {
  outline: none !important;
  box-shadow: none !important;
}
body:not(.em-embed):not(.em-standalone) .docs-subtab:focus-visible,
body:not(.em-embed) .benefits-subtab:focus-visible {
  outline: 2px solid #1f8f88 !important;
  outline-offset: -3px;
}


/* ==========================================================================
   DOCUMENTS SUB-NAV, LAST WORD
   The standalone Emails page welds its sub-nav to the header band, and that
   block is scoped only by :not(.em-embed), so it also claimed the company
   record's Documents tab. The canonical rule further down already makes
   .docs-subtab and .benefits-subtab identical, but it never resets the height,
   radius and fill the welded rule set on the active item, so Documents kept
   reading as a row of cards while Benefits and Emails read as an underline.

   This sits last on purpose. It only targets #tab-documents, which exists on
   the company record and nowhere else, so the standalone page is untouched.
   ========================================================================== */
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  /* Benefits pulls its bar up by the tab pane padding so the sub-nav welds to
     the band above it. Documents was not doing that, which is the gap. */
  margin: -24px 0 24px !important;
}
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab-bar-inner {
  align-items: center !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
}
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab-track {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  height: auto !important;
  align-items: center !important;
}
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab,
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab:hover,
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab.active,
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab.active:hover {
  height: auto !important;
  padding: 14px 0 !important;
  margin-right: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab { color: #64748b !important; }
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab:hover { color: #1f8f88 !important; }
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab.active { color: #1f8f88 !important; }
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab.active::before { display: none !important; }
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab.active::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px !important;
  border-radius: 0 !important;
  background: #1f8f88 !important;
}
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab > i {
  margin-right: 7px;
  opacity: 0.7;
  font-size: 0.9em;
}
body:not(.em-embed):not(.em-standalone) #tab-documents .docs-subtab-bar-inner > .page-header-right {
  margin-bottom: 0;
}


/* =============================================================================
   MINT DARK THEME v1  ::  ONE SHIPPABLE BLOCK
   Verified against D:\taining\enrollment-app\_pull\live on 2026-09-26.

   WHERE EACH PART GOES
     BLOCK A   append to the END of css/mint-buttons-v1.css   (after line 4247)
     BLOCK B   append to the END of css/employee-system.css   (after line 899)
     BLOCK C   paste into js/app.js and js/mint-chat.js       (marked, commented)
     BLOCK D   the toolbar gap, light and dark, UNCONFIRMED   (marked)

   WHY BLOCK A IS THE WHOLE LEVERAGE  (each fact read from the files)
     - css/mint-buttons-v1.css is 4247 lines and the LAST element in <head> on
       every page that loads it: broker/companies.html:700 then </head> at 701;
       broker/dashboard.html:782/783; broker/enrollments.html:568/569;
       broker/library.html:2825/2826; broker/settings.html:962/963;
       dm/company.html:7739/7740; broker/emails.html:12/13;
       dm/employee.html:2713/2714.
     - 35 pages load it. It contains exactly THREE dark declarations today,
       all scrollbar: lines 2470, 2471, 2472.
     - NO page anywhere redefines any --mint-btn-* property. Verified by grep
       across every html file: the only hits are css/mint-buttons-v1.css
       itself. So the token block below is uncontested.
     - Every page's own dark token block is byte-identical and is written
       `.dark-mode, body.dark-mode` (companies.html:28, dashboard.html:28,
       library.html:28, enrollments.html:28, campaigns.html:28,
       plans.html:37, dm/employee.html:33). Same ten values every time.

   SELECTOR POLICY, and why it is not the one the tracks proposed
     Tokens use bare `.dark-mode` so they land whether the class is on html
     (the head script on 10 pages) or on body (the 5 pages that write it).
     COMPONENTS use `body.dark-mode`, not bare `.dark-mode`. A bare
     `.dark-mode .x` is (0,2,0) and LOSES to each page's own
     `body.dark-mode .x` at (0,2,1). `body.dark-mode .x` ties and then wins on
     source order, because this file loads last.
     Exactly THREE pages carry a `body.dark-mode` tab block AFTER the link and
     would still beat a tie. Verified by comparing line numbers:
       PAGE WINS   broker/companies.html  link 700,  dark block 2818
       PAGE WINS   broker/enrollments.html link 568, dark block 1405
       PAGE WINS   dm/company.html        link 7739, dark block 46249
       shared wins broker/library.html, broker/plans.html, broker/campaigns.html,
                   broker/text-drops.html, broker/all-text-drops.html,
                   dm/employee.html, dm/plan.html, dm/dm-company.html,
                   dm/dm-employee.html
     The same comparison for `.mint-totop` adds broker/dashboard.html:2232.
     Section A9 handles those four pages with a doubled class, so NO page file
     has to be edited. The earlier advice to delete five lines on thirteen
     pages was wrong on the page count and is not needed at all.

   LIGHT MODE CANNOT BE TOUCHED
     Every selector below contains .dark-mode, except the two rules in A4 and
     the one in D, both of which are labelled and both of which are the only
     intentional light-mode changes in the set.
     There is NO light `:root` in this block. Ten pages declare --bg-main as
     #f8fafc or #f9fafb rather than #ffffff, and this file loads last, so a
     shared light :root would silently repaint those ten.

   MEASURED LADDER  (WCAG 2.x, computed from the hex, not estimated)
     page    #0f172a   the product's own value
     well    #131c2e   inputs, table heads, recessed bands. 1.16:1 under card
     card    #1e293b   the product's own value. 1.22:1 above page
     raised  #334155   hover, active chip. Already the product's --bg-hover
     overlay #2f3d54   menus, modals, tooltips, toasts. 1.33:1 above card
   INK on page / well / card / raised / overlay
     #f1f5f9  16.30 15.54 13.35  9.45 10.00   AAA everywhere
     #e2e8f0  14.48 13.81 11.87  8.40  8.89
     #cbd5e1  12.02 11.47  9.85  6.97  7.38
     #94a3b8   6.96  6.64  5.71  4.04  4.27   AA normal on the first three
     #5eead4  12.07 11.51  9.89  7.00  7.41   brand as ink
     #4ade80  10.25  9.77  8.40  5.94  6.29
     #fbbf24  10.69 10.20  8.76  6.20  6.56
     #f87171   6.45  6.16  5.29  3.74  3.96
     #93c5fd   9.90  9.44  8.11  5.74  6.08
     #64748b   3.75  3.58  3.07  2.18  2.30   FAILS. never text in dark.
   LINES
     #6b7b93  control boundary. 4.15 page / 3.96 well / 3.40 card.
              The ONLY candidate clearing the 3:1 of WCAG 1.4.11 on all three.
     #3b4a63  decorative hairline. 1.63:1 on card, the dark register of the
              light #e5e7eb-on-white hairline at 1.24:1.
     The shipped dark #334155 is 1.41:1 against the card it bounds: it is
     drawn and cannot be seen. That is the answer to "borders disappear".

   FOUR CONFLICTS BETWEEN THE TRACKS, RESOLVED, ONE LINE EACH
     1. Brand ink #5eead4, not #45c4bc. Both hold the hue; #45c4bc is 6.88:1
        on the card but only 4.87:1 on the #334155 active chip, which is
        marginal for a 14px 650-weight tab label, while #5eead4 is 7.00:1
        there and already ships in the product (js/navbar.js:457, js/cdrop.js).
     2. Control line #6b7b93, not #64748b or #4a5a72. #64748b is 3.07:1 on
        the card but 2.18:1 on the raised fill, and it is already the dark
        --text-muted value, so reusing it for a line invites confusion.
        #4a5a72 is 2.09:1 and misses 1.4.11 outright.
     3. Raised step #334155, not #253044 or #27344a. It is already the
        product's dark --bg-hover on all 21 pages, so the legacy alias maps
        to itself and nothing shifts twice.
     4. The tab track is DELETED, not recoloured. One track proposed an
        opaque well behind the chips; measured, #0b1220 against the #0f172a
        page is 1.05:1, so a track there is invisible anyway. More
        decisively, the current light design at css/mint-buttons-v1.css:1048
        already sets `background: transparent !important; padding: 0
        !important; border-radius: 0 !important` on all seven tab families:
        the track is gone in light. The three page-level dark rules that
        paint `rgba(255,255,255,.06)` are stale copies of the retired design.
        A8 removes the track and A9 defeats those three pages.
   ========================================================================== */


/* =============================================================================
   BLOCK A  ::  APPEND TO THE END OF css/mint-buttons-v1.css
   ========================================================================== */

/* ---- A1  dark token foundation ------------------------------------------
   Bare `.dark-mode` so the custom properties land on html at first paint and
   on body when the body writer runs. At (0,1,0) on the root element this
   still outranks `body .x` at (0,1,1) for inherited custom properties.       */
.dark-mode {
  color-scheme: dark;

  --mint-dk-page:        #0f172a;
  --mint-dk-well:        #131c2e;
  --mint-dk-card:        #1e293b;
  --mint-dk-raised:      #334155;
  --mint-dk-overlay:     #2f3d54;

  --mint-dk-line:        #6b7b93;
  --mint-dk-line-hover:  #8fa0b6;
  --mint-dk-line-soft:   #3b4a63;

  --mint-dk-ink:         #f1f5f9;
  --mint-dk-ink-2:       #cbd5e1;
  --mint-dk-ink-3:       #94a3b8;
  --mint-dk-ink-4:       #64748b;   /* border or icon only. 3.07:1, never text */
  --mint-dk-ink-inverse: #ffffff;

  --mint-dk-brand:       #5eead4;   /* brand as INK. 9.89:1 card, 12.07:1 page */
  --mint-dk-brand-hi:    #99f6e4;
  --mint-dk-brand-fill:  #177a74;   /* brand as FILL. white on it 5.16:1 */
  --mint-dk-brand-fill-hi:#1b8079;  /* white on it 4.76:1 */
  --mint-dk-brand-edge:  #2aa39b;
  --mint-dk-brand-wash:  rgba(94,234,212,.14);
  --mint-dk-brand-wash-hi:rgba(94,234,212,.22);

  --mint-dk-success:     #4ade80;
  --mint-dk-success-hi:  #6ee7b7;
  --mint-dk-success-wash:rgba(74,222,128,.16);
  --mint-dk-warning:     #fbbf24;
  --mint-dk-warning-hi:  #fcd34d;
  --mint-dk-warning-wash:rgba(251,191,36,.16);
  --mint-dk-danger:      #f87171;
  --mint-dk-danger-hi:   #fca5a5;
  --mint-dk-danger-fill: #b4231c;   /* white on it 6.57:1 */
  --mint-dk-danger-wash: rgba(248,113,113,.16);
  --mint-dk-info:        #93c5fd;
  --mint-dk-info-wash:   rgba(147,197,253,.16);
  --mint-dk-neutral-wash:rgba(148,163,184,.16);

  --mint-dk-gloss:       rgba(255,255,255,.06);
  --mint-dk-lift-1:      0 1px 2px rgba(0,0,0,.45);
  --mint-dk-lift-2:      0 4px 14px -4px rgba(0,0,0,.55);
  --mint-dk-lift-3:      0 24px 64px -12px rgba(0,0,0,.70);
  --mint-dk-edge:        rgba(148,163,184,.22);

  --mint-dk-plate:       #e8eef6;   /* stays light. supplied logo artwork */
  --mint-dk-focus:       #5eead4;
  --mint-dk-focus-halo:  rgba(94,234,212,.24);

  /* The three shipped control tokens, retoned.
     css/mint-buttons-v1.css:45-47 defines these for light only.
     --mint-btn-line feeds 43 declarations and draws the visible edge of every
     field, select, filter group, table shell and panel, as
     `inset 0 0 0 1px var(--mint-btn-line)` alongside `border: 0`
     (lines 425/428, 467/474, 502/506, 541/544). That is exactly why every
     per-page dark rule patching `border-color` is a silent no-op.
     --mint-btn-ink #334155 is the TEXT of every select and secondary button:
     1.41:1 on the card, invisible rather than merely dim.
     These three lines fix 72 declarations across 35 pages. */
  --mint-btn-line:         #6b7b93;
  --mint-btn-line-hover:   #8fa0b6;
  --mint-btn-ink:          #e2e8f0;
  --mint-btn-brand:        #177a74;
  --mint-btn-brand-top:    #1b8079;
  --mint-btn-brand-edge:   #2aa39b;
  --mint-btn-brand-press:  #125853;
  --mint-btn-danger:       #b4231c;
  --mint-btn-danger-top:   #c22a22;
  --mint-btn-danger-edge:  #d4433b;
  --mint-btn-danger-press: #8f1a15;
}

/* ---- A2  legacy aliases -------------------------------------------------
   Safe to centralise because the dark values are already unanimous on every
   page that has them. This makes the 21 hand-written page blocks deletable
   and gives the 34 pages that never had one the full set.
   THREE of these change appearance on purpose. If a cosmetically neutral
   first landing is wanted, comment out the three marked lines and ship the
   rest: the --mint-btn-* retone alone still fixes 72 declarations.          */
.dark-mode {
  --bg-main:        var(--mint-dk-page);
  --bg-page:        var(--mint-dk-page);
  --bg-card:        var(--mint-dk-card);
  --bg-hover:       var(--mint-dk-raised);
  --bg-accent:      var(--mint-dk-raised);
  --bg-well:        var(--mint-dk-well);
  --text-primary:   var(--mint-dk-ink);
  --text-secondary: var(--mint-dk-ink-2);
  --brand-primary:  var(--mint-dk-brand);
  --brand-hover:    var(--mint-dk-brand-hi);
  --brand-light:    var(--mint-dk-brand-wash);
  --brand-rgb:      94, 234, 212;
  --success-light:  var(--mint-dk-success-wash);
  --warning-light:  var(--mint-dk-warning-wash);
  --danger-light:   var(--mint-dk-danger-wash);

  /* behaviour change 1: the border becomes visible. #334155 is 1.41:1
     against the card it bounds; #6b7b93 is 3.40:1. Largest single
     improvement in the set, and the direct answer to "borders disappear". */
  --border-color:   var(--mint-dk-line);
  --border-light:   var(--mint-dk-line-soft);

  /* behaviour change 2: a field becomes recessed relative to its card,
     mirroring light where #f1f5f9 sits below #ffffff. Shipped value is
     #1e293b, identical to the card, so the field has no fill identity. */
  --bg-input:       var(--mint-dk-well);

  /* behaviour change 3: the muted ink becomes legible. #64748b is 3.07:1 on
     the card, fails AA at every size, and is used for every label,
     timestamp and placeholder. #94a3b8 is 5.71:1. */
  --text-muted:     var(--mint-dk-ink-3);
}

/* ---- A3  first paint ----------------------------------------------------
   The one declaration that is correct before any body class lands. Without
   it the load is a white page snapping to dark; with it, a dark page
   filling in. Already present on 8 pages; harmless and idempotent here.     */
html.dark-mode { background: #0f172a; }

/* ---- A4  flash control  ::  THE ONLY INTENTIONAL LIGHT-MODE CHANGE ------
   Eight pages declare `body { ... transition: background .3s, color .3s }`
   in their FIRST <style> block (companies.html:122, dashboard.html:58,
   enrollments.html:125, library.html:209, settings.html:63, plans.html:59,
   campaigns.html:80, ltd-salary-rating-main-mint.html:44). That animates the
   light-to-dark correction that happens when the body class finally lands,
   turning a one-frame mismatch into a visible 300ms wash on every load.
   `body:not(.theme-animating)` is (0,1,1) and beats bare `body` at (0,0,1),
   so this wins without editing any of those eight lines. It is not a pixel
   difference in the settled state; only the load animation goes away.
   To keep the deliberate toggle smooth, broker/settings.html's
   toggleDarkMode should add .theme-animating before flipping the class and
   remove it 400ms later. Without that the toggle is simply instant, which
   is acceptable to ship.                                                    */
body:not(.theme-animating) { transition: background 0s linear, color 0s linear; }
body.theme-animating       { transition: background .3s ease, color .3s ease; }
@media (prefers-reduced-motion: reduce) { body.theme-animating { transition: none; } }

/* ---- A5  ground, header band, titles ----------------------------------- */
body.dark-mode { background: var(--mint-dk-page); color: var(--mint-dk-ink); }
body.dark-mode ::selection { background: rgba(94,234,212,.28); color: var(--mint-dk-ink); }
body.dark-mode .content,
body.dark-mode .content-area,
body.dark-mode .main { background: var(--mint-dk-page); }
body.dark-mode .content-area { border-top-color: var(--mint-dk-line-soft); }
/* the shipped band is rgba(186,228,226,.48), only 48 percent opaque, so it
   does not repaint with the page: over #0f172a it composites to about
   #617982, a flat mid-grey slab lighter than any surface in the palette. */
body.dark-mode .page-header,
body.dark-mode .company-header,
body.dark-mode .employee-header,
body.dark-mode .plan-header {
  background: linear-gradient(180deg, var(--mint-dk-card) 0%, var(--mint-dk-page) 100%);
  border-bottom: 1px solid var(--mint-dk-line-soft);
  box-shadow: none;
}
body.dark-mode .page-title,
body.dark-mode .company-name,
body.dark-mode .section-title,
body.dark-mode .em-section-title { color: var(--mint-dk-ink); }
body.dark-mode .page-subtitle,
body.dark-mode .company-meta,
body.dark-mode .section-subtitle { color: var(--mint-dk-ink-3); }
body.dark-mode .breadcrumb { color: var(--mint-dk-ink-3); }
body.dark-mode .breadcrumb a { color: var(--mint-dk-brand); }
body.dark-mode .breadcrumb-sep { color: var(--mint-dk-ink-4); }
body.dark-mode .topbar { background: var(--mint-dk-card); border-bottom-color: var(--mint-dk-line-soft); }
body.dark-mode .topbar-nav a { color: var(--mint-dk-ink-2); }
body.dark-mode .topbar-nav a:hover,
body.dark-mode .topbar-nav a.active,
body.dark-mode .logo-text { color: var(--mint-dk-brand); }
body.dark-mode .topbar-icon { color: var(--mint-dk-ink-3); }
body.dark-mode .topbar-icon:hover { color: var(--mint-dk-brand); }

/* ---- A6  cards, panels, empty states ---------------------------------- */
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .table-container,
body.dark-mode .companies-table,
body.dark-mode .plans-table,
body.dark-mode .docs-section,
body.dark-mode .profile-section,
body.dark-mode .settings-section,
body.dark-mode .location-card,
body.dark-mode .job-class-item,
body.dark-mode .company-card,
body.dark-mode .enrollment-card,
body.dark-mode .benefit-card,
body.dark-mode .doc-card,
body.dark-mode .doc-item,
body.dark-mode .report-type-card,
body.dark-mode .report-config-panel,
body.dark-mode .template-card,
body.dark-mode .manager-card,
body.dark-mode .preview-card,
body.dark-mode .action-tile,
body.dark-mode .coverage-tile,
body.dark-mode .cobra-stat-card,
body.dark-mode .aca-readiness,
body.dark-mode .aca-check-card,
body.dark-mode .election-item,
body.dark-mode .em-start,
body.dark-mode .em-stat,
body.dark-mode .sk-card {
  background: var(--mint-dk-card);
  border-color: var(--mint-dk-line-soft);
  box-shadow: var(--mint-dk-lift-1), inset 0 1px 0 var(--mint-dk-gloss);
}
body.dark-mode .docs-section,
body.dark-mode .em-start,
body.dark-mode .em-stat { border-color: var(--mint-dk-line-soft) !important; }
body.dark-mode .em-stat + .em-stat { border-left-color: var(--mint-dk-line-soft) !important; }
/* on dark a hover goes UP the ladder. Nineteen shipped row-action hovers use
   rgba(15,23,42,.06), which produces no visible change at all on #0f172a. */
body.dark-mode .company-card:hover,
body.dark-mode .enrollment-card:hover,
body.dark-mode .benefit-card:hover,
body.dark-mode .doc-card:hover,
body.dark-mode .doc-item:hover,
body.dark-mode .location-card:hover,
body.dark-mode .report-type-card:hover,
body.dark-mode .election-item:hover {
  background: var(--mint-dk-raised);
  border-color: var(--mint-dk-line);
  box-shadow: var(--mint-dk-lift-2), inset 0 1px 0 var(--mint-dk-gloss);
}
/* a section header cap inverts from a step up to a step down */
body.dark-mode .card-header,
body.dark-mode .docs-section-header,
body.dark-mode .profile-section-header,
body.dark-mode .location-card-header,
body.dark-mode .settings-section-header,
body.dark-mode .history-section-title {
  background: var(--mint-dk-well);
  border-bottom-color: var(--mint-dk-line-soft);
  color: var(--mint-dk-ink-2);
}
body.dark-mode .card-title,
body.dark-mode .docs-section-title,
body.dark-mode .profile-section-title,
body.dark-mode .settings-section-title,
body.dark-mode .profile-value,
body.dark-mode .em-start h2,
body.dark-mode .em-stat-value,
body.dark-mode .cobra-stat-value,
body.dark-mode .aca-metric-val,
body.dark-mode .aca-check-card-title,
body.dark-mode .report-type-name { color: var(--mint-dk-ink); }
body.dark-mode .profile-label,
body.dark-mode .em-start p,
body.dark-mode .em-start-note,
body.dark-mode .em-stat-label,
body.dark-mode .cobra-stat-label,
body.dark-mode .cobra-stat-sub,
body.dark-mode .aca-metric-label,
body.dark-mode .aca-check-detail,
body.dark-mode .report-type-desc,
body.dark-mode .settings-section-desc,
body.dark-mode .location-meta,
body.dark-mode .location-address { color: var(--mint-dk-ink-3); }
body.dark-mode .profile-row,
body.dark-mode .checkbox-row,
body.dark-mode .settings-row,
body.dark-mode .login-status-row,
body.dark-mode .company-card-bottom { border-color: var(--mint-dk-line-soft); }
body.dark-mode .empty-state,
body.dark-mode .empty-enrollments,
body.dark-mode .empty-companies {
  border-color: var(--mint-dk-line-soft);
  background: linear-gradient(180deg, var(--mint-dk-card) 0%, var(--mint-dk-well) 100%);
}
body.dark-mode .empty-state h3,
body.dark-mode .empty-enrollments h3,
body.dark-mode .empty-companies h3,
body.dark-mode .locations-empty-title,
body.dark-mode .employees-empty-title { color: var(--mint-dk-ink); }
body.dark-mode .empty-state p,
body.dark-mode .empty-enrollments p,
body.dark-mode .empty-companies p,
body.dark-mode .empty-message,
body.dark-mode .empty,
body.dark-mode .locations-empty-subtitle,
body.dark-mode .employees-empty-subtitle { color: var(--mint-dk-ink-3); }
body.dark-mode .empty-state i { color: var(--mint-dk-brand); }
/* PLATES THAT STAY LIGHT ON PURPOSE. These sit behind supplied client and
   carrier artwork drawn for a white ground: css/mint-buttons-v1.css:1315 and
   :2196 (.back-logo), :4161 (.em-co-logo), dm/company.html:443 and :444.
   Flipping them puts dark logos on a dark fill. Cooled slightly so they do
   not glare. */
body.dark-mode .back-logo,
body.dark-mode .em-co-logo,
body.dark-mode .em-co-mark,
body.dark-mode .em-co-mark img,
body.dark-mode .company-icon.has-logo,
body.dark-mode .company-icon img,
body.dark-mode .switcher-logo img,
body.dark-mode .company-logo img,
body.dark-mode .chat-cl-logo { background: var(--mint-dk-plate); }
body.dark-mode .em-co-logo { box-shadow: inset 0 0 0 1px var(--mint-dk-edge); }

/* ---- A7  tables ------------------------------------------------------- */
body.dark-mode .table-container thead th,
body.dark-mode .companies-table thead th,
body.dark-mode .plans-table thead th,
body.dark-mode .docs-table thead th,
body.dark-mode .data-table thead th,
body.dark-mode .templates-table thead th,
body.dark-mode .em-table thead th,
body.dark-mode thead th {
  background: var(--mint-dk-well);
  color: var(--mint-dk-ink-3);
  border-bottom-color: var(--mint-dk-line-soft);
}
body.dark-mode thead th button { color: var(--mint-dk-ink-3) !important; }
body.dark-mode thead th:hover,
body.dark-mode th.sortable:hover { color: var(--mint-dk-brand); }
body.dark-mode tbody td,
body.dark-mode .table-container tbody td,
body.dark-mode .plans-table tbody td,
body.dark-mode .docs-table tbody td,
body.dark-mode .data-table tbody td,
body.dark-mode .templates-table tbody td,
body.dark-mode .em-table tbody td {
  color: var(--mint-dk-ink-2);
  border-bottom-color: var(--mint-dk-line-soft);
}
body.dark-mode tbody tr:hover td,
body.dark-mode .table-container tbody tr:hover td,
body.dark-mode .plans-table tbody tr:hover td,
body.dark-mode .docs-table tbody tr:hover td,
body.dark-mode .templates-table tbody tr:hover td,
body.dark-mode .em-table tbody tr:hover { background: var(--mint-dk-raised); }
body.dark-mode .link { color: var(--mint-dk-brand); }
body.dark-mode .link:hover { color: var(--mint-dk-brand-hi); }
body.dark-mode .enrollment-dates,
body.dark-mode .emp-count-cell,
body.dark-mode .em-cell-main { color: var(--mint-dk-ink-2); }
body.dark-mode .enrollment-dates .cal-icon,
body.dark-mode .emp-count-icon,
body.dark-mode .em-cell-sub,
body.dark-mode .em-table .muted { color: var(--mint-dk-ink-3); }
body.dark-mode .pagination-bar {
  background: var(--mint-dk-card);
  border-top-color: var(--mint-dk-line-soft);
  box-shadow: 0 -8px 24px rgba(0,0,0,.45);
}
body.dark-mode .pagination-bar .page-btn { background: var(--mint-dk-raised); color: var(--mint-dk-ink-2); }
body.dark-mode .pagination-bar .page-btn:hover:not(:disabled) { background: var(--mint-dk-brand-fill); color: var(--mint-dk-ink-inverse); }
body.dark-mode .pagination-bar .page-btn:disabled { background: var(--mint-dk-well); color: var(--mint-dk-ink-4); }
body.dark-mode .pagination-left,
body.dark-mode .pagination-right,
body.dark-mode .pagination-bar .page-num,
body.dark-mode .page-ellipsis { color: var(--mint-dk-ink-3); }
body.dark-mode .pagination-bar .page-num:hover,
body.dark-mode .pagination-bar .page-num.active { color: var(--mint-dk-brand); }

/* ---- A8  tabs and sub-tabs -------------------------------------------
   The current light design is TRACKLESS: css/mint-buttons-v1.css:1048-1067
   sets background transparent, padding 0, border-radius 0, box-shadow none on
   all seven families, and :1119 makes the active chip the only filled thing
   in the row. Dark mirrors that shape exactly: no track, one raised chip.   */
body.dark-mode .tabs > .tab,
body.dark-mode .plans-tabs > .plans-tab,
body.dark-mode .filter-tabs > .filter-tab,
body.dark-mode .header-tabs > .header-tab,
body.dark-mode .company-tabs > .company-tab,
body.dark-mode .main-tabs > .main-tab,
body.dark-mode .plan-tabs > .plan-tab,
body.dark-mode .company-tabs > .company-tab--settings,
body.dark-mode .dep-tab { color: var(--mint-dk-ink-2) !important; }
body.dark-mode .tabs > .tab:hover,
body.dark-mode .plans-tabs > .plans-tab:hover,
body.dark-mode .filter-tabs > .filter-tab:hover,
body.dark-mode .header-tabs > .header-tab:hover,
body.dark-mode .company-tabs > .company-tab:hover,
body.dark-mode .main-tabs > .main-tab:hover,
body.dark-mode .plan-tabs > .plan-tab:hover,
body.dark-mode .company-tabs > .company-tab--settings:hover,
body.dark-mode .dep-tab:hover {
  color: var(--mint-dk-ink) !important;
  background: rgba(255,255,255,.07) !important;
}
/* floating chips: one raised fill, the same four layers the light chip uses */
body.dark-mode .tabs > .tab.active,
body.dark-mode .tabs > .tab.active:hover,
body.dark-mode .plans-tabs > .plans-tab.active,
body.dark-mode .plans-tabs > .plans-tab.active:hover,
body.dark-mode .filter-tabs > .filter-tab.active,
body.dark-mode .filter-tabs > .filter-tab.active:hover,
body.dark-mode .header-tabs > .header-tab.active,
body.dark-mode .header-tabs > .header-tab.active:hover {
  background: var(--mint-dk-raised) !important;
  color: var(--mint-dk-brand) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(94,234,212,.20),
    var(--mint-dk-lift-1),
    0 3px 8px -2px rgba(0,0,0,.40) !important;
}
/* welded tabs fill to the DARK page ground they now open into. The intent is
   stated at css/mint-buttons-v1.css:1150-1153 and :1201-1204: the active tab
   is filled with the page ground that starts below the band, with hairlines
   on top and sides and deliberately none on the bottom. */
body.dark-mode .company-tabs > .company-tab.active,
body.dark-mode .company-tabs > .company-tab.active:hover,
body.dark-mode .company-tabs > .company-tab--settings.active,
body.dark-mode .main-tabs > .main-tab.active,
body.dark-mode .main-tabs > .main-tab.active:hover,
body.dark-mode .plan-tabs > .plan-tab.active,
body.dark-mode .plan-tabs > .plan-tab.active:hover,
body.dark-mode .page-header .tabs > .tab.active,
body.dark-mode .dep-tab.active,
body.dark-mode .dep-tab.active:hover {
  background: var(--mint-dk-page) !important;
  color: var(--mint-dk-brand) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 -1px 0 var(--mint-dk-edge),
    -1px 0 0 var(--mint-dk-edge),
    1px 0 0 var(--mint-dk-edge) !important;
}
body.dark-mode .tabs > .tab:focus-visible,
body.dark-mode .filter-tabs > .filter-tab:focus-visible,
body.dark-mode .main-tabs > .main-tab:focus-visible,
body.dark-mode .company-tabs > .company-tab:focus-visible,
body.dark-mode .view-btn:focus-visible { outline-color: var(--mint-dk-focus) !important; }
/* the glider reads the live chip's computed background-color, so the chip
   rules above carry it. The floor stops a failed read painting a white pill.
   (0,5,1) clears the @media screen blocks at :1477 and :1957. */
body.dark-mode { --mint-glider-fill: var(--mint-dk-raised); }
@media screen {
  body.dark-mode .tabs.mint-glide-on > .tab.active,
  body.dark-mode .plans-tabs.mint-glide-on > .plans-tab.active,
  body.dark-mode .filter-tabs.mint-glide-on > .filter-tab.active,
  body.dark-mode .header-tabs.mint-glide-on > .header-tab.active {
    background-color: var(--mint-dk-raised) !important;
    background-image: none !important;
  }
  body.dark-mode .company-tabs.mint-glide-on > .company-tab.active,
  body.dark-mode .main-tabs.mint-glide-on > .main-tab.active,
  body.dark-mode .plan-tabs.mint-glide-on > .plan-tab.active {
    background-color: var(--mint-dk-page) !important;
    background-image: none !important;
  }
}
/* count badges. The shipped pair is #2f524f on a 10 percent teal wash, which
   composites to about 1.7:1 on dark, and a near-white #e6f5f4 active pill at
   about 13:1. Same control, invisible in one state and glaring in the other.
   Page-level light rules are (0,3,0) !important; these are (0,4,1). */
body.dark-mode .tabs > .tab .count,
body.dark-mode .tabs > .tab .badge,
body.dark-mode .tabs > .tab .tab-count,
body.dark-mode .plans-tabs > .plans-tab .count,
body.dark-mode .plans-tabs > .plans-tab .badge,
body.dark-mode .filter-tabs > .filter-tab .count,
body.dark-mode .filter-tabs > .filter-tab .badge,
body.dark-mode .filter-tabs > .filter-tab .filter-count,
body.dark-mode .header-tabs > .header-tab .count,
body.dark-mode .header-tabs > .header-tab .badge,
body.dark-mode .company-tabs > .company-tab .count,
body.dark-mode .company-tabs > .company-tab .badge,
body.dark-mode .main-tabs > .main-tab .count,
body.dark-mode .main-tabs > .main-tab .badge,
body.dark-mode .plan-tabs > .plan-tab .count,
body.dark-mode .plan-tabs > .plan-tab .badge {
  background: var(--mint-dk-neutral-wash) !important;
  color: var(--mint-dk-ink-2) !important;
}
body.dark-mode .tabs > .tab.active .count,
body.dark-mode .tabs > .tab.active .badge,
body.dark-mode .tabs > .tab.active .tab-count,
body.dark-mode .plans-tabs > .plans-tab.active .count,
body.dark-mode .plans-tabs > .plans-tab.active .badge,
body.dark-mode .filter-tabs > .filter-tab.active .count,
body.dark-mode .filter-tabs > .filter-tab.active .badge,
body.dark-mode .filter-tabs > .filter-tab.active .filter-count,
body.dark-mode .header-tabs > .header-tab.active .count,
body.dark-mode .header-tabs > .header-tab.active .badge,
body.dark-mode .company-tabs > .company-tab.active .count,
body.dark-mode .company-tabs > .company-tab.active .badge,
body.dark-mode .main-tabs > .main-tab.active .count,
body.dark-mode .main-tabs > .main-tab.active .badge,
body.dark-mode .plan-tabs > .plan-tab.active .count,
body.dark-mode .plan-tabs > .plan-tab.active .badge {
  background: var(--mint-dk-brand-wash-hi) !important;
  color: var(--mint-dk-brand) !important;
}
/* sub-tabs: an underline on a recessed band, never a tile. Three
   arrangements exist in the shared file (:2643, :3930, :4182) and all three
   are covered. Note the light active ink #1f8f88 on the #f8fafc bar is
   3.76:1 and fails AA in LIGHT mode too; that correction is listed in the
   plan as a separate, owner-visible change and is not made here. */
body.dark-mode:not(.em-embed) .docs-subtab-bar,
body.dark-mode:not(.em-embed) .benefits-subtab-bar,
body.dark-mode .subtab-bar {
  background: var(--mint-dk-well) !important;
  border-bottom-color: var(--mint-dk-line-soft) !important;
}
body.dark-mode:not(.em-embed) .docs-subtab-track { background: transparent !important; }
body.dark-mode:not(.em-embed) #tab-documents .docs-subtab-bar { background: transparent !important; }
body.dark-mode:not(.em-embed) .docs-subtab,
body.dark-mode:not(.em-embed) .benefits-subtab,
body.dark-mode .subtab { color: var(--mint-dk-ink-3) !important; }
body.dark-mode:not(.em-embed) .docs-subtab:hover,
body.dark-mode:not(.em-embed) .benefits-subtab:hover,
body.dark-mode:not(.em-embed) .docs-subtab.active,
body.dark-mode:not(.em-embed) .benefits-subtab.active,
body.dark-mode:not(.em-embed) #tab-documents .docs-subtab.active,
body.dark-mode .subtab:hover,
body.dark-mode .subtab.active { color: var(--mint-dk-brand) !important; }
body.dark-mode:not(.em-embed) .docs-subtab.active::after,
body.dark-mode:not(.em-embed) .benefits-subtab.active::after,
body.dark-mode .subtab.active::after { background: var(--mint-dk-brand); }
body.dark-mode:not(.em-embed) .docs-subtab:focus-visible,
body.dark-mode:not(.em-embed) .benefits-subtab:focus-visible { outline-color: var(--mint-dk-focus) !important; }
/* the embedded Emails frame. Both classes land on the same body element, so
   the compound must be spelled out. */
body.dark-mode.em-embed { background: var(--mint-dk-page); }
body.dark-mode.em-embed .docs-subtab-bar { background: var(--mint-dk-well) !important; border-bottom-color: var(--mint-dk-line-soft) !important; }
body.dark-mode.em-embed .docs-subtab { color: var(--mint-dk-ink-3) !important; }
body.dark-mode.em-embed .docs-subtab:hover,
body.dark-mode.em-embed .docs-subtab.active { color: var(--mint-dk-brand) !important; }
body.dark-mode.em-embed .docs-subtab.active::after { background: var(--mint-dk-brand); }
body.dark-mode.em-embed .em-embed-bar {
  background: var(--mint-dk-card) !important;
  border-color: var(--mint-dk-line-soft) !important;
  color: var(--mint-dk-ink-2);
  box-shadow: var(--mint-dk-lift-1);
}
body.dark-mode #tab-emails,
body.dark-mode #emailsTabFrame,
body.dark-mode #emailsTabSkeleton { background: var(--mint-dk-page); }

/* ---- A9  the four pages that beat a tie -------------------------------
   Verified collision list, by line number:
     broker/companies.html   tabs 2818-2824, totop 3269-3270  (link 700)
     broker/enrollments.html tabs 1405-1411, totop 1856-1857  (link 568)
     dm/company.html         tabs 46249-...,  totop 47189-...  (link 7739)
     broker/dashboard.html                    totop 2232-2233 (link 782)
   Each is `body.dark-mode ...` in a BODY-level <style> that loads after this
   file, so it ties on specificity and wins on order. Repeating the class on
   body adds one class and defeats it with NO markup change to any page.
   Their values are also wrong: the track they paint no longer exists in the
   light design, and their #334155 totop border is 1.41:1 against its own
   #1e293b fill.                                                            */
body.dark-mode.dark-mode .tabs,
body.dark-mode.dark-mode .plans-tabs,
body.dark-mode.dark-mode .filter-tabs,
body.dark-mode.dark-mode .header-tabs,
body.dark-mode.dark-mode .company-tabs,
body.dark-mode.dark-mode .main-tabs,
body.dark-mode.dark-mode .plan-tabs {
  background: transparent !important;
  box-shadow: none !important;
}
body.dark-mode.dark-mode .tabs > .tab,
body.dark-mode.dark-mode .plans-tabs > .plans-tab,
body.dark-mode.dark-mode .filter-tabs > .filter-tab,
body.dark-mode.dark-mode .header-tabs > .header-tab,
body.dark-mode.dark-mode .company-tabs > .company-tab,
body.dark-mode.dark-mode .main-tabs > .main-tab,
body.dark-mode.dark-mode .plan-tabs > .plan-tab { color: var(--mint-dk-ink-2) !important; }
body.dark-mode.dark-mode .tabs > .tab.active,
body.dark-mode.dark-mode .plans-tabs > .plans-tab.active,
body.dark-mode.dark-mode .filter-tabs > .filter-tab.active,
body.dark-mode.dark-mode .header-tabs > .header-tab.active {
  background: var(--mint-dk-raised) !important;
  color: var(--mint-dk-brand) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(94,234,212,.20),
    var(--mint-dk-lift-1),
    0 3px 8px -2px rgba(0,0,0,.40) !important;
}
body.dark-mode.dark-mode .company-tabs > .company-tab.active,
body.dark-mode.dark-mode .main-tabs > .main-tab.active,
body.dark-mode.dark-mode .plan-tabs > .plan-tab.active {
  background: var(--mint-dk-page) !important;
  color: var(--mint-dk-brand) !important;
}
body.dark-mode.dark-mode .mint-totop {
  background: var(--mint-dk-card);
  border-color: var(--mint-dk-line);
  color: var(--mint-dk-ink-2);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.60);
}
body.dark-mode.dark-mode .mint-totop:hover {
  background: var(--mint-dk-overlay);
  border-color: var(--mint-dk-line-hover);
  color: var(--mint-dk-ink);
}
body.dark-mode.dark-mode .mint-totop:focus-visible { outline-color: var(--mint-dk-focus); }
/* the back-to-top button shares its corner with the chat launcher, which is
   fixed at the same corner at z-index 9998 against this button's 60, so one
   covers the other. This looks like a light-mode bug too, but it was not
   confirmed in a browser, so it is scoped to dark here rather than shipped
   as an unrequested light-mode layout change. */
body.dark-mode .mint-totop { bottom: 96px; }
@media (max-width: 640px) { body .mint-totop { bottom: 84px; } }

/* ---- A10  fields, selects, filter groups, toggles ---------------------
   A field is identified by a RECESSED fill; the ring only edges it. Fill,
   ink and placeholder are always named together, because a rule that sets
   only one of the three turns a light field into an unreadable one.        */
body.dark-mode .search-box > i + input,
body.dark-mode .search-box > .search-icon + input,
body.dark-mode .search-box input,
body.dark-mode .form-input,
body.dark-mode .field-input,
body.dark-mode .search-input,
body.dark-mode textarea.form-input,
body.dark-mode .form-textarea,
body.dark-mode .dep-form-input,
body.dark-mode .dep-modal-input,
body.dark-mode .share-form-input,
body.dark-mode .send-email-form input,
body.dark-mode .aca-missing-search,
body.dark-mode .filter-select,
body.dark-mode .plans-filter-select,
body.dark-mode .form-select,
body.dark-mode .manual-plan-select,
body.dark-mode .match-select,
body.dark-mode .dep-form-select {
  background-color: var(--mint-dk-well);
  color: var(--mint-dk-ink);
  border-color: var(--mint-dk-line);
  box-shadow: inset 0 0 0 1px var(--mint-dk-line), inset 0 1px 3px rgba(0,0,0,.35);
}
body.dark-mode .search-box > i + input::placeholder,
body.dark-mode .search-box > .search-icon + input::placeholder,
body.dark-mode .search-box input::placeholder,
body.dark-mode .form-input::placeholder,
body.dark-mode .field-input::placeholder,
body.dark-mode .search-input::placeholder,
body.dark-mode textarea.form-input::placeholder,
body.dark-mode .form-textarea::placeholder,
body.dark-mode .dep-form-input::placeholder,
body.dark-mode .dep-modal-input::placeholder,
body.dark-mode .share-form-input::placeholder { color: var(--mint-dk-ink-3); }
body.dark-mode .search-box > i,
body.dark-mode .search-box > .search-icon,
body.dark-mode .search-box i,
body.dark-mode .field-box.has-select::after,
body.dark-mode .field-label .help-icon,
body.dark-mode .select-display.placeholder { color: var(--mint-dk-ink-3); }
body.dark-mode .search-box > .search-icon { background: var(--mint-dk-well); border-color: var(--mint-dk-line); }
body.dark-mode .filter-select option,
body.dark-mode .plans-filter-select option,
body.dark-mode .form-select option,
body.dark-mode .manual-plan-select option,
body.dark-mode .match-select option,
body.dark-mode .dep-form-select option,
body.dark-mode select.field-value option,
body.dark-mode select:not(.field-value) option {
  background-color: var(--mint-dk-card);
  color: var(--mint-dk-ink);
}
body.dark-mode .filter-group {
  background: var(--mint-dk-well);
  box-shadow: inset 0 0 0 1px var(--mint-dk-line), inset 0 1px 3px rgba(0,0,0,.35);
}
body.dark-mode .filter-group:hover { box-shadow: inset 0 0 0 1px var(--mint-dk-line-hover), inset 0 1px 3px rgba(0,0,0,.35); }
body.dark-mode .filter-group:focus-within { box-shadow: inset 0 0 0 1px var(--mint-dk-focus), 0 0 0 3px var(--mint-dk-focus-halo); }
body.dark-mode .filter-group .filter-label {
  background: var(--mint-dk-card);
  border-right-color: var(--mint-dk-line-soft);
  color: var(--mint-dk-ink-3);
}
body.dark-mode .filter-group .filter-select,
body.dark-mode .filter-group .cdrop-trigger { background-color: var(--mint-dk-well); color: var(--mint-dk-ink); }
body.dark-mode .search-box > i + input:focus,
body.dark-mode .search-box > .search-icon + input:focus,
body.dark-mode .search-box input:focus,
body.dark-mode .form-input:focus,
body.dark-mode .field-input:focus,
body.dark-mode .search-input:focus,
body.dark-mode .form-textarea:focus,
body.dark-mode .filter-select:focus,
body.dark-mode .plans-filter-select:focus,
body.dark-mode .form-select:focus,
body.dark-mode .manual-plan-select:focus,
body.dark-mode .match-select:focus,
body.dark-mode .dep-form-input:focus,
body.dark-mode .dep-form-select:focus,
body.dark-mode .dep-modal-input:focus,
body.dark-mode .aca-missing-search:focus {
  border-color: var(--mint-dk-focus);
  box-shadow: inset 0 0 0 1px var(--mint-dk-focus), 0 0 0 3px var(--mint-dk-focus-halo) !important;
}
body.dark-mode .form-label,
body.dark-mode .field-label,
body.dark-mode .dep-form-label,
body.dark-mode .dep-modal-label,
body.dark-mode .share-form-label,
body.dark-mode .add-broker-label { color: var(--mint-dk-ink-2); }
body.dark-mode .field-box { background: var(--mint-dk-well); border-color: var(--mint-dk-line); }
/* inline-styled fields: the shared rule at :840 gives them the light ring */
body.dark-mode input[style*="border-radius"]:not([type="checkbox"]):not([type="radio"]),
body.dark-mode select[style*="border-radius"] {
  box-shadow: inset 0 0 0 1px var(--mint-dk-line), inset 0 1px 3px rgba(0,0,0,.35);
}
body.dark-mode .docs-section .slug-input,
body.dark-mode #companySlugInput,
body.dark-mode #companySubdomainInput,
body.dark-mode #companyCustomDomainInput {
  background: var(--mint-dk-well) !important;
  color: var(--mint-dk-ink) !important;
  box-shadow: inset 0 0 0 1px var(--mint-dk-line), inset 0 1px 3px rgba(0,0,0,.35) !important;
}
body.dark-mode .checkbox-toggle { background: var(--mint-dk-line-soft); }
body.dark-mode .checkbox-toggle::after { background: var(--mint-dk-ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
body.dark-mode input:checked + .checkbox-toggle { background: var(--mint-dk-brand-fill); }
body.dark-mode input:checked + .checkbox-toggle::after { background: var(--mint-dk-ink-inverse); }
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] { accent-color: var(--mint-dk-brand-fill); }
body.dark-mode .payroll-tax-option { background: var(--mint-dk-well); border-color: var(--mint-dk-line-soft); }
body.dark-mode .payroll-tax-option:hover { background: var(--mint-dk-raised); border-color: var(--mint-dk-focus); }
body.dark-mode .payroll-tax-option:has(input:checked) { background: var(--mint-dk-brand-wash); border-color: var(--mint-dk-focus); }
body.dark-mode .payroll-tax-option span { color: var(--mint-dk-ink); }
body.dark-mode .payroll-tax-option small { color: var(--mint-dk-ink-3); }

/* ---- A11  the view toggle  ::  NAMED SCREENSHOT DEFECT ----------------
   css/mint-buttons-v1.css:583 paints the track #f1f5f9 and :604 the active
   thumb #fff, and the light hover ink #334155 is DARKER than the resting
   #64748b, so on a dark track hovering an icon makes it disappear.         */
body.dark-mode .view-toggle {
  background: var(--mint-dk-well);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}
body.dark-mode .view-btn { color: var(--mint-dk-ink-3); }
body.dark-mode .view-btn:hover { color: var(--mint-dk-ink); background: rgba(255,255,255,.06); }
body.dark-mode .view-btn.active {
  background: var(--mint-dk-raised);
  color: var(--mint-dk-brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--mint-dk-lift-1), inset 0 0 0 1px var(--mint-dk-edge);
}

/* ---- A12  buttons ----------------------------------------------------
   Primary: the fill darkens so the white label clears AA at the file's own
   0.92rem/600. White on #1f8f88 is 3.93:1 and fails in LIGHT mode too;
   white on #177a74 is 5.16:1. Only the dark side is changed here.         */
body.dark-mode .btn-primary,
body.dark-mode .btn-send,
body.dark-mode .btn-confirm,
body.dark-mode .btn-success,
body.dark-mode .btn-connect,
body.dark-mode .btn-generate,
body.dark-mode .btn-save-slug,
body.dark-mode .btn-upload,
body.dark-mode .confirm-btn,
body.dark-mode .upload-btn,
body.dark-mode .fix-issues-btn,
body.dark-mode .empty-state-btn,
body.dark-mode .send-email-submit,
body.dark-mode .modal-btn-save,
body.dark-mode .confirm-modal-confirm,
body.dark-mode .btn-brand,
body.dark-mode .election-add-btn,
body.dark-mode .nh-trigger-btn,
body.dark-mode .locations-empty-btn,
body.dark-mode .inactivity-btn.primary {
  color: var(--mint-dk-ink-inverse);
  background-color: var(--mint-dk-brand-fill);
  background-image: linear-gradient(180deg, var(--mint-dk-brand-fill-hi) 0%, var(--mint-dk-brand-fill) 100%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.14), 0 0 0 1px rgba(94,234,212,.24), var(--mint-dk-lift-1);
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-send:hover,
body.dark-mode .btn-confirm:hover,
body.dark-mode .btn-success:hover,
body.dark-mode .btn-connect:hover,
body.dark-mode .btn-generate:hover,
body.dark-mode .btn-save-slug:hover,
body.dark-mode .btn-upload:hover,
body.dark-mode .confirm-btn:hover,
body.dark-mode .upload-btn:hover,
body.dark-mode .fix-issues-btn:hover,
body.dark-mode .empty-state-btn:hover,
body.dark-mode .send-email-submit:hover,
body.dark-mode .modal-btn-save:hover,
body.dark-mode .confirm-modal-confirm:hover,
body.dark-mode .btn-brand:hover,
body.dark-mode .election-add-btn:hover,
body.dark-mode .nh-trigger-btn:hover,
body.dark-mode .locations-empty-btn:hover,
body.dark-mode .inactivity-btn.primary:hover {
  background-image: linear-gradient(180deg, var(--mint-dk-brand-edge) 0%, var(--mint-dk-brand-fill-hi) 100%);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.18), 0 0 0 1px rgba(94,234,212,.38), var(--mint-dk-lift-2);
}
body.dark-mode .btn-send:disabled { background: var(--mint-dk-well); color: var(--mint-dk-ink-3); background-image: none; }
/* the low-strength brand buttons some pages ship (rgba(34,112,154,.1), a
   slate blue left over from the pre-rebrand palette, with a #1f8f88 label
   at 3.44:1 over white, so it fails in light too) */
body.dark-mode .controls-add,
body.dark-mode .btn-add { background: var(--mint-dk-brand-wash); color: var(--mint-dk-brand); border-color: var(--mint-dk-line-soft); }
body.dark-mode .controls-add:hover,
body.dark-mode .btn-add:hover { background: var(--mint-dk-brand-wash-hi); }
body.dark-mode .btn-add i { color: var(--mint-dk-brand); }
body.dark-mode .btn-add-note,
body.dark-mode .btn-add-comp,
body.dark-mode .dep-add-btn {
  background-color: var(--mint-dk-brand-fill) !important;
  background-image: linear-gradient(180deg, var(--mint-dk-brand-fill-hi) 0%, var(--mint-dk-brand-fill) 100%) !important;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.14), 0 0 0 1px rgba(94,234,212,.24), var(--mint-dk-lift-1) !important;
}
/* SECONDARY. The four-layer light moulding becomes one raised fill plus one
   hairline: the inset white gloss at .9 reads as a stray bright line on a
   dark fill, so it DROPS rather than dims. All ten sites in the shared file
   that restate the white-card recipe are named (:226, :754, :1286, :1566,
   :1888, :2161, :2947, :3051, :3803, :4078). */
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline,
body.dark-mode .btn-cancel,
body.dark-mode .btn-back,
body.dark-mode .btn-forms-library,
body.dark-mode .back-btn,
body.dark-mode .skip-btn,
body.dark-mode .start-over-btn,
body.dark-mode .text-drops-btn,
body.dark-mode .company-switcher-btn,
body.dark-mode .template-callout-btn,
body.dark-mode .template-use-btn,
body.dark-mode .btn-export,
body.dark-mode .edit-btn,
body.dark-mode .modal-btn-cancel,
body.dark-mode .send-email-cancel,
body.dark-mode .confirm-modal-cancel,
body.dark-mode .wizard-view-btn,
body.dark-mode .application-button,
body.dark-mode .quick-extend-btn,
body.dark-mode .profile-edit-btn,
body.dark-mode .login-action-btn-sm,
body.dark-mode .em-preset,
body.dark-mode .copy-link-btn,
body.dark-mode .preview-nav-btn,
body.dark-mode .templates-view-all,
body.dark-mode .inactivity-btn.secondary {
  color: var(--mint-dk-ink);
  background-color: var(--mint-dk-raised);
  background-image: none;
  border-color: var(--mint-dk-line);
  box-shadow: inset 0 0 0 1px var(--mint-dk-line), var(--mint-dk-lift-1);
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-outline:hover,
body.dark-mode .btn-cancel:hover,
body.dark-mode .btn-back:hover,
body.dark-mode .btn-forms-library:hover,
body.dark-mode .back-btn:hover,
body.dark-mode .skip-btn:hover,
body.dark-mode .start-over-btn:hover,
body.dark-mode .text-drops-btn:hover,
body.dark-mode .company-switcher-btn:hover,
body.dark-mode .template-callout-btn:hover,
body.dark-mode .template-use-btn:hover,
body.dark-mode .btn-export:hover,
body.dark-mode .edit-btn:hover,
body.dark-mode .modal-btn-cancel:hover,
body.dark-mode .send-email-cancel:hover,
body.dark-mode .confirm-modal-cancel:hover,
body.dark-mode .wizard-view-btn:hover,
body.dark-mode .application-button:hover,
body.dark-mode .quick-extend-btn:hover,
body.dark-mode .profile-edit-btn:hover,
body.dark-mode .login-action-btn-sm:hover,
body.dark-mode .em-preset:hover,
body.dark-mode .copy-link-btn:hover,
body.dark-mode .preview-nav-btn:hover,
body.dark-mode .inactivity-btn.secondary:hover {
  color: var(--mint-dk-ink);
  background-color: var(--mint-dk-overlay);
  background-image: none;
  border-color: var(--mint-dk-line-hover);
  box-shadow: inset 0 0 0 1px var(--mint-dk-line-hover), var(--mint-dk-lift-2);
}
body.dark-mode .btn-secondary.is-brand,
body.dark-mode .btn-outline.is-brand,
body.dark-mode .text-drops-btn,
body.dark-mode .template-callout-btn,
body.dark-mode .btn-forms-library,
body.dark-mode .templates-view-all { color: var(--mint-dk-brand); }
body.dark-mode .btn-secondary.is-brand:hover,
body.dark-mode .btn-outline.is-brand:hover,
body.dark-mode .text-drops-btn:hover,
body.dark-mode .template-callout-btn:hover,
body.dark-mode .btn-forms-library:hover,
body.dark-mode .templates-view-all:hover { color: var(--mint-dk-brand-hi); }
/* the four sites that carry the same recipe with !important */
body.dark-mode .btn-header.secondary,
body.dark-mode .header-btn.secondary,
body.dark-mode #copyEnrollmentLinkBtn,
body.dark-mode #electionAuditToggleBtn,
body.dark-mode #tab-aca .aca-btn-download,
body.dark-mode #tab-aca .aca-quick-btn,
body.dark-mode #tab-aca .aca-missing-pager button,
body.dark-mode #tab-newhires .nh-configure-btn {
  color: var(--mint-dk-ink) !important;
  background-color: var(--mint-dk-raised) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--mint-dk-line), var(--mint-dk-lift-1) !important;
}
body.dark-mode #copyEnrollmentLinkBtn:hover,
body.dark-mode #electionAuditToggleBtn:hover,
body.dark-mode .header-btn.secondary:hover,
body.dark-mode #tab-aca .aca-btn-download:hover:not(:disabled),
body.dark-mode #tab-aca .aca-quick-btn:hover:not(:disabled),
body.dark-mode #tab-newhires .nh-configure-btn:hover {
  color: var(--mint-dk-ink) !important;
  background-color: var(--mint-dk-overlay) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--mint-dk-line-hover), var(--mint-dk-lift-2) !important;
}
/* DANGER, filled. Also: the header secondary's destructive hover, which is a
   cream slab in light. */
body.dark-mode .btn-danger,
body.dark-mode .btn-disconnect,
body.dark-mode .header-btn.danger {
  color: var(--mint-dk-ink-inverse) !important;
  background-color: var(--mint-dk-danger-fill) !important;
  background-image: linear-gradient(180deg, #c22a22 0%, var(--mint-dk-danger-fill) 100%) !important;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.14), 0 0 0 1px rgba(248,113,113,.30), var(--mint-dk-lift-1) !important;
}
body.dark-mode .btn-danger:hover,
body.dark-mode .btn-disconnect:hover,
body.dark-mode .header-btn.danger:hover {
  background-image: linear-gradient(180deg, #d4433b 0%, #c22a22 100%) !important;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.18), 0 0 0 1px rgba(248,113,113,.44), var(--mint-dk-lift-2) !important;
}
body.dark-mode .btn-header.secondary:hover {
  color: var(--mint-dk-danger-hi) !important;
  background-color: var(--mint-dk-danger-wash) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.38), var(--mint-dk-lift-1) !important;
}
body.dark-mode .login-action-btn-sm.login-action-danger:hover {
  color: var(--mint-dk-danger-hi);
  background-color: var(--mint-dk-danger-wash);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.38);
}
/* GHOST and DISABLED. Both light rules use a black wash, which on a
   near-black ground produces no visible change at all. */
body.dark-mode .btn-ghost { color: var(--mint-dk-ink-3); background: transparent; }
body.dark-mode .btn-ghost:hover { color: var(--mint-dk-ink); background: rgba(255,255,255,.08); }
body.dark-mode .btn:disabled,
body.dark-mode .btn-primary:disabled,
body.dark-mode .btn-secondary:disabled,
body.dark-mode .btn-outline:disabled,
body.dark-mode .btn-danger:disabled,
body.dark-mode .controls-add:disabled,
body.dark-mode .confirm-btn:disabled,
body.dark-mode #tab-aca .aca-btn:disabled {
  color: var(--mint-dk-ink-4);
  background-color: var(--mint-dk-well);
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--mint-dk-line-soft);
}
/* ICON-ONLY and ROW ACTIONS. The light hover paints a literal white chip at
   :368; the quiet hovers use a black translucency at :572 and :685 that is
   invisible on dark. On dark, hover always goes LIGHTER. */
body.dark-mode .action-btn,
body.dark-mode .cell-edit-btn,
body.dark-mode .issue-edit-btn,
body.dark-mode .onboard-edit-btn,
body.dark-mode .slug-copy-btn,
body.dark-mode .url-copy-btn,
body.dark-mode .doc-rename-btn,
body.dark-mode .input-icon-btn,
body.dark-mode .doc-action-btn,
body.dark-mode .modal-close,
body.dark-mode .location-action-btn,
body.dark-mode .location-copy-btn,
body.dark-mode .selection-action-btn,
body.dark-mode .plans-action-btn,
body.dark-mode .nh-card-action-btn,
body.dark-mode .cobra-action-btn,
body.dark-mode .pv-col-action,
body.dark-mode .btn-icon,
body.dark-mode .template-item-btn,
body.dark-mode .plan-doc-file-btn,
body.dark-mode .send-email-close,
body.dark-mode .election-modal-close,
body.dark-mode .ci-face-remove,
body.dark-mode .login-field-btn,
body.dark-mode .dp-nav,
body.dark-mode .preview-modal-close { color: var(--mint-dk-ink-3); }
body.dark-mode .dm-actions-btn { color: var(--mint-dk-ink-3) !important; }
body.dark-mode .action-btn:hover,
body.dark-mode .cell-edit-btn:hover,
body.dark-mode .issue-edit-btn:hover,
body.dark-mode .slug-copy-btn:hover,
body.dark-mode .url-copy-btn:hover,
body.dark-mode .doc-rename-btn:hover,
body.dark-mode .input-icon-btn:hover {
  background: var(--mint-dk-brand-wash);
  color: var(--mint-dk-brand);
  box-shadow: inset 0 0 0 1px var(--mint-dk-edge), var(--mint-dk-lift-1);
}
body.dark-mode .doc-action-btn:hover,
body.dark-mode .modal-close:hover,
body.dark-mode .location-action-btn:hover,
body.dark-mode .location-copy-btn:hover,
body.dark-mode .selection-action-btn:hover,
body.dark-mode .plans-action-btn:hover,
body.dark-mode .nh-card-action-btn:hover,
body.dark-mode .cobra-action-btn:hover,
body.dark-mode .pv-col-action:hover,
body.dark-mode .btn-icon:hover,
body.dark-mode .template-item-btn:hover,
body.dark-mode .plan-doc-file-btn:hover,
body.dark-mode .send-email-close:hover,
body.dark-mode .election-modal-close:hover,
body.dark-mode .ci-face-remove:hover,
body.dark-mode .login-field-btn:hover,
body.dark-mode .dp-nav:hover,
body.dark-mode .preview-modal-close:hover { background: rgba(255,255,255,.10); color: var(--mint-dk-ink); }
body.dark-mode .dm-actions-btn:hover { background: rgba(255,255,255,.10) !important; color: var(--mint-dk-brand) !important; }
body.dark-mode .onboard-edit-btn:hover { color: var(--mint-dk-brand) !important; }
body.dark-mode .plans-action-btn.primary,
body.dark-mode .selection-action-btn.primary,
body.dark-mode .cobra-action-btn.send,
body.dark-mode .nh-card-action-btn.primary { color: var(--mint-dk-brand); }
body.dark-mode .plans-action-btn.primary:hover,
body.dark-mode .selection-action-btn.primary:hover,
body.dark-mode .cobra-action-btn.send:hover,
body.dark-mode .nh-card-action-btn.primary:hover { color: var(--mint-dk-brand-hi); background: var(--mint-dk-brand-wash); }
body.dark-mode tbody td .btn-icon,
body.dark-mode tbody td [class*="action-btn"],
body.dark-mode tbody td .dep-remove-btn { color: var(--mint-dk-ink-3) !important; }
body.dark-mode tbody td .btn-icon:hover,
body.dark-mode tbody td [class*="action-btn"]:hover { color: var(--mint-dk-brand) !important; }
body.dark-mode tbody td button[style*="width"]:hover { background-color: var(--mint-dk-raised) !important; color: var(--mint-dk-brand) !important; }
/* DESTRUCTIVE GLYPH. The light hover goes #dc4a42 (3.55:1) to #b91c1c
   (2.26:1), so reaching for delete makes it harder to see. Brighter on dark. */
body.dark-mode .location-action-btn.delete,
body.dark-mode .selection-action-btn.danger,
body.dark-mode .nh-card-action-btn.delete,
body.dark-mode .cobra-action-btn.delete,
body.dark-mode .plans-action-btn.delete,
body.dark-mode .btn-icon.danger,
body.dark-mode .btn-icon-danger,
body.dark-mode .delete-icon-btn,
body.dark-mode .dm-list-remove,
body.dark-mode .tag-remove,
body.dark-mode .nh-upload-preview-remove,
body.dark-mode .template-item-btn.delete,
body.dark-mode .plan-doc-file-btn.danger,
body.dark-mode .doc-dropdown-item.danger,
body.dark-mode .current-broker-remove,
body.dark-mode .delete-company-link { color: var(--mint-dk-danger); }
body.dark-mode .location-action-btn.delete:hover,
body.dark-mode .selection-action-btn.danger:hover,
body.dark-mode .nh-card-action-btn.delete:hover,
body.dark-mode .cobra-action-btn.delete:hover,
body.dark-mode .plans-action-btn.delete:hover,
body.dark-mode .btn-icon.danger:hover,
body.dark-mode .btn-icon-danger:hover,
body.dark-mode .delete-icon-btn:hover,
body.dark-mode .dm-list-remove:hover,
body.dark-mode .tag-remove:hover,
body.dark-mode .nh-upload-preview-remove:hover,
body.dark-mode .template-item-btn.delete:hover,
body.dark-mode .plan-doc-file-btn.danger:hover,
body.dark-mode .doc-dropdown-item.danger:hover,
body.dark-mode .current-broker-remove:hover,
body.dark-mode .delete-company-link:hover {
  color: var(--mint-dk-danger-hi);
  background: var(--mint-dk-danger-wash);
}
/* INLINE-STYLED CONTROLS, 510 of them. The light rule at :801 washes 20
   percent white over whatever inline background-color the JS template wrote;
   the ratio flips, the technique does not, so it still needs to know no
   colours. */
body.dark-mode button[style*="border-radius"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]),
body.dark-mode label[style*="inline-flex"][style*="border-radius"],
body.dark-mode a[style*="inline-flex"][style*="border-radius"],
body.dark-mode a[style*="inline-block"][style*="border-radius"] {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 52%, rgba(0,0,0,.22) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--mint-dk-lift-1), 0 2px 7px -2px rgba(0,0,0,.55) !important;
}
body.dark-mode button[style*="border-radius"]:not([class*="tab"]):not([class*="pill"]):not([class*="chip"]):hover,
body.dark-mode label[style*="inline-flex"][style*="border-radius"]:hover,
body.dark-mode a[style*="inline-flex"][style*="border-radius"]:hover,
body.dark-mode a[style*="inline-block"][style*="border-radius"]:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--mint-dk-lift-1), 0 6px 16px -4px rgba(0,0,0,.65) !important;
}

/* ---- A13  the onboarding link box  ::  NAMED SCREENSHOT DEFECT --------
   Two halves in two files. The pale slab and the illegible link are
   page-local (broker/dashboard.html:42-43, :105-110), but the slug editor
   inside the same box is owned by css/mint-buttons-v1.css:2217-2237 with
   `color: #1f8f88 !important` at 3.72:1, and its Cancel hover at :2254
   forces `color: #0f172a !important` on a near-transparent dark fill, which
   is 1.22:1: the label vanishes exactly when the pointer reaches it.
   .onboard-box at dashboard.html:84-90 is a bare transparent flex column in
   light: no background, no border-width, no padding, no radius. The dark
   rule invents a slab light mode does not have, and its border-color is
   inert because nothing sets a border-width. Restore parity.               */
body.dark-mode .onboard-box { background: transparent; border-color: transparent; }
body.dark-mode .onboard-box:hover { background: transparent; }
body.dark-mode .onboard-link { color: var(--mint-dk-brand); }
body.dark-mode .onboard-link:hover { color: var(--mint-dk-brand-hi); opacity: 1; }
body.dark-mode .onboard-label { color: var(--mint-dk-ink-3); }
body.dark-mode .onboard-title { color: var(--mint-dk-ink); }
body.dark-mode .onboard-meta { color: var(--mint-dk-ink-3); }
body.dark-mode .action-link { color: var(--mint-dk-ink-3); }
body.dark-mode .action-link:hover { color: var(--mint-dk-ink); }
body.dark-mode .action-link.copied { color: var(--mint-dk-success); }
body.dark-mode .action-divider { color: var(--mint-dk-ink-4); }
body.dark-mode .action-link-spinner { border-color: rgba(148,163,184,.24); border-top-color: var(--mint-dk-brand); }
body.dark-mode .view-all-link,
body.dark-mode .view-all-link.prominent { color: var(--mint-dk-brand) !important; }
body.dark-mode .view-all-link.prominent:hover { color: var(--mint-dk-brand-hi) !important; }
body.dark-mode .section-header a { color: var(--mint-dk-brand); }
body.dark-mode .onboard-box .slug-input,
body.dark-mode .slug-edit-wrap .slug-input,
body.dark-mode #customSlugInput {
  border-bottom-color: var(--mint-dk-brand) !important;
  color: var(--mint-dk-brand) !important;
}
body.dark-mode .onboard-box .slug-input.valid { border-bottom-color: var(--mint-dk-success) !important; }
body.dark-mode .onboard-box .slug-input.invalid { border-bottom-color: var(--mint-dk-danger) !important; }
body.dark-mode .slug-prefix { background: var(--mint-dk-well); color: var(--mint-dk-brand); border-right-color: var(--mint-dk-line-soft); }
body.dark-mode .slug-btn.save { background: var(--mint-dk-brand-fill) !important; color: var(--mint-dk-ink-inverse) !important; }
body.dark-mode .slug-btn.save:hover { background: var(--mint-dk-brand-fill-hi) !important; }
body.dark-mode .slug-btn.save:disabled { background: var(--mint-dk-neutral-wash) !important; color: var(--mint-dk-ink-4) !important; }
body.dark-mode .slug-btn.cancel { color: var(--mint-dk-ink-3) !important; }
body.dark-mode .slug-btn.cancel:hover { background: rgba(255,255,255,.10) !important; color: var(--mint-dk-ink) !important; box-shadow: none !important; }
body.dark-mode .slug-indicator.checking { color: var(--mint-dk-ink-3); }
body.dark-mode .slug-indicator.valid,
body.dark-mode .slug-status.available { color: var(--mint-dk-success); }
body.dark-mode .slug-indicator.invalid,
body.dark-mode .slug-status.taken { color: var(--mint-dk-danger); }
body.dark-mode .slug-status.checking { color: var(--mint-dk-warning); }
body.dark-mode .slug-input-row { background: var(--mint-dk-well); border-color: var(--mint-dk-line); }
body.dark-mode .slug-input-row.checking { border-color: var(--mint-dk-warning); }
body.dark-mode .slug-input-row.available { border-color: var(--mint-dk-success); }
body.dark-mode .slug-input-row.taken { border-color: var(--mint-dk-danger); }
body.dark-mode .slug-input-row:focus-within { border-color: var(--mint-dk-focus); box-shadow: 0 0 0 3px var(--mint-dk-focus-halo); }
/* the sent-history panel opened from that same box. No dark rule existed for
   any part of it: dashboard.html:406-522. It is an overlay, so it steps up. */
body.dark-mode .sent-dropdown {
  background: var(--mint-dk-overlay);
  border-color: var(--mint-dk-edge);
  box-shadow: var(--mint-dk-lift-3);
}
body.dark-mode .sent-dropdown::before {
  background: var(--mint-dk-overlay);
  border-left-color: var(--mint-dk-edge);
  border-top-color: var(--mint-dk-edge);
}
body.dark-mode .sent-dropdown-header { border-bottom-color: var(--mint-dk-edge); color: var(--mint-dk-ink-3); }
body.dark-mode .sent-item { border-bottom-color: rgba(148,163,184,.14); }
body.dark-mode .sent-item-email { color: var(--mint-dk-ink); }
body.dark-mode .sent-item-time,
body.dark-mode .sent-item-link,
body.dark-mode .sent-empty { color: var(--mint-dk-ink-3); }
body.dark-mode .sent-item-icon { background: var(--mint-dk-success-wash); color: var(--mint-dk-success); }
body.dark-mode .sent-item-icon.pending { background: var(--mint-dk-warning-wash); color: var(--mint-dk-warning); }
body.dark-mode .sent-item-icon.completed { background: var(--mint-dk-brand-wash); color: var(--mint-dk-brand); }
body.dark-mode .sent-item-badge.delivered { background: var(--mint-dk-success-wash); color: var(--mint-dk-success-hi); }
body.dark-mode .sent-item-badge.completed { background: var(--mint-dk-brand-wash-hi); color: var(--mint-dk-brand); }
body.dark-mode .sent-item-badge.pending { background: var(--mint-dk-warning-wash); color: var(--mint-dk-warning-hi); }
body.dark-mode .sent-item-badge.old { background: var(--mint-dk-danger-wash); color: var(--mint-dk-danger-hi); }
body.dark-mode .sent-item-btn.copy { background: rgba(139,92,246,.18); color: #c4b5fd; }
body.dark-mode .sent-item-btn.copy.copied { background: var(--mint-dk-success-wash); color: var(--mint-dk-success-hi); }
body.dark-mode .sent-item-btn.delete { color: var(--mint-dk-ink-3); }
body.dark-mode .sent-item-btn.delete:hover { background: var(--mint-dk-danger-wash); color: var(--mint-dk-danger-hi); }
body.dark-mode .sent-item-btn.more { background: var(--mint-dk-neutral-wash); color: var(--mint-dk-ink-2); }
body.dark-mode #sentActionMenu {
  background: var(--mint-dk-overlay);
  border-color: var(--mint-dk-edge);
  box-shadow: var(--mint-dk-lift-3);
}
body.dark-mode .sent-action-item { color: var(--mint-dk-ink-2); }
body.dark-mode .sent-action-item:hover { background: rgba(255,255,255,.10); color: var(--mint-dk-ink); }
body.dark-mode .sent-action-item i { color: var(--mint-dk-ink-3); }

/* ---- A14  modals, drawers, menus, tooltips, toasts -------------------
   An overlay steps UP the ladder and gains a hairline. The shipped modal
   edge is `0 0 0 1px rgba(16,24,40,.05)` (:2607), invisible on dark, so the
   dialog has no boundary at all. The tooltip bubble is painted #0f172a,
   which IS the dark page ground: a 1:1 boundary, so the panel disappears
   and only its text floats.                                               */
body.dark-mode .modal,
body.dark-mode .preview-modal-box,
body.dark-mode .inactivity-content {
  background: var(--mint-dk-card) !important;
  box-shadow: var(--mint-dk-lift-3), 0 0 0 1px var(--mint-dk-edge) !important;
}
body.dark-mode .modal-header,
body.dark-mode .preview-modal-header { border-bottom-color: var(--mint-dk-line-soft) !important; }
body.dark-mode .modal-footer,
body.dark-mode .preview-modal-footer { background: var(--mint-dk-well) !important; border-top-color: var(--mint-dk-line-soft) !important; }
body.dark-mode .modal-title,
body.dark-mode .preview-modal-title,
body.dark-mode .inactivity-title { color: var(--mint-dk-ink) !important; }
body.dark-mode .modal-title i { color: var(--mint-dk-brand) !important; }
body.dark-mode .modal-body { color: var(--mint-dk-ink-2) !important; }
body.dark-mode .preview-modal-body { background: var(--mint-dk-page); }
body.dark-mode .inactivity-subtitle,
body.dark-mode .inactivity-countdown-label,
body.dark-mode .preview-page-info { color: var(--mint-dk-ink-3); }
body.dark-mode .inactivity-countdown { color: var(--mint-dk-brand); }
body.dark-mode .modal-overlay,
body.dark-mode .preview-modal-overlay,
body.dark-mode .em-drawer-overlay,
body.dark-mode .inactivity-modal { background: rgba(2,6,15,.72) !important; }
body.dark-mode .em-drawer {
  background: var(--mint-dk-card);
  border-left-color: var(--mint-dk-line-soft);
  box-shadow: -10px 0 40px rgba(0,0,0,.55);
}
body.dark-mode .em-drawer-header { border-bottom-color: var(--mint-dk-line-soft); }
body.dark-mode .em-drawer-footer { border-top-color: var(--mint-dk-line-soft); }
body.dark-mode .em-drawer-title { color: var(--mint-dk-ink); }
body.dark-mode .em-menu,
body.dark-mode .em-dd,
body.dark-mode .plans-actions-menu,
body.dark-mode .doc-dropdown,
body.dark-mode .broker-dropdown,
body.dark-mode .company-switcher-dropdown,
body.dark-mode .visibility-menu,
body.dark-mode .cdrop-menu {
  background: var(--mint-dk-overlay);
  border-color: var(--mint-dk-edge);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.60);
}
body.dark-mode .em-menu button,
body.dark-mode .em-dd button,
body.dark-mode .plans-actions-menu button,
body.dark-mode .doc-dropdown-item,
body.dark-mode .cdrop-option { color: var(--mint-dk-ink-2); }
body.dark-mode .em-menu button:hover,
body.dark-mode .em-dd button:hover,
body.dark-mode .plans-actions-menu button:hover,
body.dark-mode .doc-dropdown-item:hover { background: rgba(255,255,255,.10); color: var(--mint-dk-ink); }
body.dark-mode .cdrop-option:hover,
body.dark-mode .cdrop-option.selected { background: var(--mint-dk-brand-wash-hi); color: var(--mint-dk-brand); }
body.dark-mode .cdrop-trigger {
  background-color: var(--mint-dk-well) !important;
  border-color: var(--mint-dk-line) !important;
  color: var(--mint-dk-ink) !important;
}
body.dark-mode .cdrop-trigger:focus { border-color: var(--mint-dk-focus) !important; }
body.dark-mode .em-menu button i,
body.dark-mode .plans-actions-menu button i { color: var(--mint-dk-ink-3); }
body.dark-mode .em-menu-sep { background: var(--mint-dk-line-soft); }
body.dark-mode .broker-select-trigger { background: var(--mint-dk-well); border-color: var(--mint-dk-line); color: var(--mint-dk-ink); }
body.dark-mode .broker-select-trigger:focus,
body.dark-mode .broker-select-trigger.open { border-color: var(--mint-dk-focus); box-shadow: 0 0 0 3px var(--mint-dk-focus-halo); }
body.dark-mode .broker-select-placeholder,
body.dark-mode .broker-option-email,
body.dark-mode .broker-dropdown-empty,
body.dark-mode .current-broker-email,
body.dark-mode .no-brokers-msg { color: var(--mint-dk-ink-3); }
body.dark-mode .broker-tag { background: var(--mint-dk-brand-wash-hi); color: var(--mint-dk-brand); }
body.dark-mode .broker-tag-remove { color: var(--mint-dk-brand); }
body.dark-mode .broker-tag-remove:hover { color: var(--mint-dk-danger-hi); }
body.dark-mode .broker-option:hover { background: rgba(255,255,255,.10); }
body.dark-mode .broker-option.selected { background: var(--mint-dk-brand-wash); }
body.dark-mode .broker-option-name,
body.dark-mode .current-broker-name { color: var(--mint-dk-ink); }
body.dark-mode .broker-option-check { color: var(--mint-dk-brand); }
body.dark-mode .current-broker-item { background: var(--mint-dk-well); }
body.dark-mode .current-broker-badge { background: var(--mint-dk-success-wash); color: var(--mint-dk-success-hi); }
body.dark-mode .add-broker-section { border-top-color: var(--mint-dk-line-soft); }
body.dark-mode .dm-card { background: var(--mint-dk-well) !important; }
body.dark-mode .dm-card-name { color: var(--mint-dk-ink) !important; }
body.dark-mode .dm-card-email { color: var(--mint-dk-ink-3) !important; }
body.dark-mode .dm-card-avatar { background: var(--mint-dk-brand-wash) !important; color: var(--mint-dk-brand) !important; }
body.dark-mode [data-tooltip]:not(.action-btn)::before,
body.dark-mode .progress-tip,
body.dark-mode .progress-tooltip {
  background: var(--mint-dk-overlay);
  color: var(--mint-dk-ink);
  border-color: var(--mint-dk-edge);
  box-shadow: 0 8px 28px -6px rgba(0,0,0,.65), 0 0 0 1px var(--mint-dk-edge);
}
body.dark-mode [data-tooltip]:not(.action-btn)::after,
body.dark-mode .progress-tip-arrow::after { border-top-color: var(--mint-dk-overlay); }
body.dark-mode .progress-tip-arrow { border-top-color: var(--mint-dk-edge); }
body.dark-mode .action-btn::after {
  background: var(--mint-dk-overlay) !important;
  color: var(--mint-dk-ink) !important;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.60), 0 0 0 1px var(--mint-dk-edge) !important;
}
body.dark-mode .action-btn::before { border-top-color: var(--mint-dk-overlay) !important; }
body.dark-mode .progress-tip-head,
body.dark-mode .progress-tip-note,
body.dark-mode .progress-tooltip .tt-badge { color: var(--mint-dk-ink-3); }
body.dark-mode .progress-tip-big { color: var(--mint-dk-brand); }
body.dark-mode .progress-tip-big span,
body.dark-mode .progress-tip-sub,
body.dark-mode .progress-tip-row { color: var(--mint-dk-ink-2); }
body.dark-mode .progress-tip-row b { color: var(--mint-dk-ink); }
body.dark-mode .progress-tip-rule { background: var(--mint-dk-edge); }
/* the toast that css/mint-buttons-v1.css does not own is in BLOCK C */
body.dark-mode .toast {
  background: var(--mint-dk-overlay);
  border-color: var(--mint-dk-edge);
  color: var(--mint-dk-ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.60);
}
body.dark-mode .toast-success .toast-icon { color: var(--mint-dk-success); }
body.dark-mode .toast-error .toast-icon { color: var(--mint-dk-danger); }
body.dark-mode .toast-info .toast-icon { color: var(--mint-dk-brand); }
body.dark-mode .toast-warning .toast-icon { color: var(--mint-dk-warning); }

/* ---- A15  badges, pills, chips --------------------------------------
   The light pair is a pale tint with a dark ink, which inverts on dark into
   a bright chip with unreadable text: #15803d is 2.92:1 on the card and
   #b45309 is 2.91:1. Here the tint becomes a low-alpha wash of the SAME hue
   so it sits INTO the surface, and the ink becomes the 300 to 400 step of
   that hue. Ratios on card: 8.40 / 8.76 / 5.29 / 8.11 / 9.85.             */
body.dark-mode .status-badge.status-active,
body.dark-mode .status-badge.active,
body.dark-mode .badge-active,
body.dark-mode .benefit-status-badge.active,
body.dark-mode .plan-status.active,
body.dark-mode .doc-badge-signed,
body.dark-mode .pill-sent,
body.dark-mode .pill-active,
body.dark-mode .pill-ok,
body.dark-mode .pill-completed,
body.dark-mode .sig-badge.has-sig,
body.dark-mode .aca-check-dot.ok,
body.dark-mode .cobra-event-status.elected,
body.dark-mode .cobra-event-status.active,
body.dark-mode .login-history-icon.success {
  background: var(--mint-dk-success-wash) !important;
  color: var(--mint-dk-success-hi) !important;
}
body.dark-mode .status-badge.status-pending,
body.dark-mode .badge-paused,
body.dark-mode .benefit-status-badge.pending,
body.dark-mode .benefit-status-badge.no_response,
body.dark-mode .plan-status.needs-review,
body.dark-mode .pill-paused,
body.dark-mode .pill-warning,
body.dark-mode .pill-scheduled,
body.dark-mode .notes-empty,
body.dark-mode .dep-info-tag,
body.dark-mode .cobra-deadline-icon.yellow,
body.dark-mode .cobra-event-status.election_pending,
body.dark-mode .aca-check-dot.warn,
body.dark-mode .em-note {
  background: var(--mint-dk-warning-wash) !important;
  color: var(--mint-dk-warning-hi) !important;
}
body.dark-mode .status-badge.status-locked,
body.dark-mode .badge-failed,
body.dark-mode .benefit-status-badge.terminated,
body.dark-mode .plan-status.inactive,
body.dark-mode .pill-failed,
body.dark-mode .pill-bounced,
body.dark-mode .pill-error,
body.dark-mode .cobra-deadline-icon.red,
body.dark-mode .login-history-icon.failed,
body.dark-mode .em-note.danger {
  background: var(--mint-dk-danger-wash) !important;
  color: var(--mint-dk-danger-hi) !important;
}
body.dark-mode .badge-sent,
body.dark-mode .benefit-status-badge.future,
body.dark-mode .pill-sending,
body.dark-mode .pill-delivered,
body.dark-mode .task-card-badge.msgs,
body.dark-mode .cobra-event-status.employer_notified,
body.dark-mode .cobra-event-status.notice_sent,
body.dark-mode .preview-field-count {
  background: var(--mint-dk-info-wash) !important;
  color: var(--mint-dk-info) !important;
}
body.dark-mode .status-badge.inactive,
body.dark-mode .status-badge.archived,
body.dark-mode .badge-ended,
body.dark-mode .benefit-status-badge.waived,
body.dark-mode .plan-status.draft,
body.dark-mode .pill,
body.dark-mode .pill-draft,
body.dark-mode .pill-neutral,
body.dark-mode .pill-ended,
body.dark-mode .nh-card-badge,
body.dark-mode .cobra-event-status.detected,
body.dark-mode .template-list-type,
body.dark-mode .em-src-tag,
body.dark-mode .em-src-tag.em-src-dm {
  background: var(--mint-dk-neutral-wash) !important;
  color: var(--mint-dk-ink-2) !important;
}
body.dark-mode .status-badge.upcoming,
body.dark-mode .em-src-tag.em-src-employee,
body.dark-mode .cobra-deadline-icon.teal {
  background: var(--mint-dk-brand-wash) !important;
  color: var(--mint-dk-brand) !important;
}
body.dark-mode .em-note.info { background: var(--mint-dk-brand-wash) !important; color: var(--mint-dk-brand) !important; }
body.dark-mode .days-badge { background: var(--mint-dk-success-wash); color: #34d399; }
body.dark-mode .em-avatar { background: var(--mint-dk-brand-wash); color: var(--mint-dk-brand); box-shadow: inset 0 0 0 1px rgba(94,234,212,.18); }
body.dark-mode .em-avatar-dm,
body.dark-mode .em-avatar-contact { background: var(--mint-dk-neutral-wash); color: var(--mint-dk-ink-3); box-shadow: inset 0 0 0 1px var(--mint-dk-edge); }
body.dark-mode .em-co-initials { background: var(--mint-dk-raised); color: var(--mint-dk-ink-3); }
body.dark-mode .em-chip,
body.dark-mode .em-aud-chip,
body.dark-mode .em-aud-co { background: var(--mint-dk-raised); border-color: var(--mint-dk-line-soft); color: var(--mint-dk-ink-2); }
body.dark-mode .em-chip:hover { background: var(--mint-dk-overlay); border-color: var(--mint-dk-line-hover); }
body.dark-mode .em-chip.active { background: var(--mint-dk-brand-wash); border-color: rgba(94,234,212,.38); color: var(--mint-dk-brand); }
body.dark-mode .em-aud-more { color: var(--mint-dk-ink-3); }
body.dark-mode .page-title-icon,
body.dark-mode .company-icon,
body.dark-mode .company-logo i { color: var(--mint-dk-brand); }
body.dark-mode .company-icon { background: var(--mint-dk-raised); border-color: var(--mint-dk-line-soft); }
/* the product's signature green completion circle. #dcfce7 is near-white, so
   it is respecified to stay recognisably green without becoming the
   brightest object on screen. #6ee7b7 is 9.60:1 on the dark card. */
body.dark-mode .check-circle,
body.dark-mode .ep-dependent-avatar,
body.dark-mode .status-complete .ep-status-icon,
body.dark-mode .nh-detail-step-icon.done {
  background: rgba(74,222,128,.20);
  color: var(--mint-dk-success-hi);
}
body.dark-mode .ep-dependent-check { border-color: var(--mint-dk-card); }
body.dark-mode .status-warning .ep-status-icon { background: rgba(251,191,36,.20); color: var(--mint-dk-warning-hi); }
body.dark-mode .status-progress .ep-status-icon { background: var(--mint-dk-brand-wash-hi); color: var(--mint-dk-brand); }

/* ---- A16  progress, spinners, dots ----------------------------------
   A track is a WELL on dark, below its container, with a visible lip. The
   shipped tracks resolve to #334155 (1.41:1 on a card) or #e5e7eb, so the
   indicator either loses its denominator or becomes the brightest ring on
   the page. The red percentage is the one of four that failed: #dc2626 is
   3.70:1 while orange passes at 5.02:1, so the enrolments the broker most
   needs to act on were the least readable.                                */
body.dark-mode .progress-bar,
body.dark-mode .enrollment-bar,
body.dark-mode .enrollment-bar-segment.empty,
body.dark-mode .chat-card-progress-bar,
body.dark-mode .em-metric-bar {
  background: #0b1220;
  box-shadow: inset 0 0 0 1px var(--mint-dk-edge);
}
body.dark-mode .progress-circle .bg,
body.dark-mode .radial-progress .bg,
body.dark-mode .aca-ring-wrap .bg,
body.dark-mode .enrollment-chart-bg { stroke: #0b1220; }
body.dark-mode .progress-fill,
body.dark-mode .chat-card-progress-fill,
body.dark-mode .em-metric-bar > i { background: var(--mint-dk-brand-edge); }
body.dark-mode .progress-circle .fg,
body.dark-mode .radial-progress .fg,
body.dark-mode .enrollment-chart-progress { stroke: var(--mint-dk-brand-edge); }
body.dark-mode .progress-fill.green,
body.dark-mode .progress-percent.green,
body.dark-mode .enrollment-stat-dot.completed,
body.dark-mode .status-dot.green { color: var(--mint-dk-success); background: var(--mint-dk-success); }
body.dark-mode .progress-percent.green { background: none; }
body.dark-mode .progress-fill.yellow,
body.dark-mode .enrollment-stat-dot.in-progress,
body.dark-mode .status-dot.yellow { background: var(--mint-dk-warning); }
body.dark-mode .progress-percent.yellow { color: var(--mint-dk-warning); }
body.dark-mode .progress-fill.orange { background: #fb923c; }
body.dark-mode .progress-percent.orange { color: #fb923c; }
body.dark-mode .progress-fill.red,
body.dark-mode .enrollment-stat-dot.not-started,
body.dark-mode .status-dot.red { background: var(--mint-dk-danger); }
body.dark-mode .progress-percent.red { color: var(--mint-dk-danger); }
body.dark-mode .status-dot.gray { background: var(--mint-dk-ink-4); }
body.dark-mode .progress-tooltip .tt-dot.enrolled { background: var(--mint-dk-success); }
body.dark-mode .progress-tooltip .tt-dot.in-progress { background: var(--mint-dk-warning); }
body.dark-mode .progress-tooltip .tt-dot.not-started { background: var(--mint-dk-danger); }
body.dark-mode .progress-tooltip .tt-dot.waived { background: var(--mint-dk-ink-2); }
body.dark-mode .progress-circle-text,
body.dark-mode .aca-ring-pct,
body.dark-mode .enrollment-chart-percent { color: var(--mint-dk-brand); }
body.dark-mode .aca-ring-sub,
body.dark-mode .enrollment-chart-label { color: var(--mint-dk-ink-3); }
body.dark-mode .loader-spinner,
body.dark-mode .action-link-spinner,
body.dark-mode .navbar-search-loader {
  border-color: var(--mint-dk-line-soft);
  border-top-color: var(--mint-dk-brand);
}
body.dark-mode .page-loader,
body.dark-mode .loader { background: rgba(15,23,42,.94); }

/* ---- A17  skeletons -------------------------------------------------
   #eef1f4 is 12.90:1 on a card and the sheen is 55 to 58 percent white, so
   a loading table was the brightest object on the page. The bar drops to a
   raised fill and the sheen to 10 percent, which still reads as motion.    */
body.dark-mode .skeleton,
body.dark-mode .sk-b { background-color: var(--mint-dk-overlay); }
body.dark-mode .sk-ghost,
body.dark-mode .sk-ghost:hover { background-color: var(--mint-dk-overlay) !important; }
body.dark-mode .skeleton::after,
body.dark-mode .sk-b::after,
body.dark-mode .sk-ghost::after {
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 45%,
    rgba(94,234,212,.12) 60%,
    rgba(255,255,255,0) 100%);
}
body.dark-mode .sk-row { border-bottom-color: var(--mint-dk-line-soft); }
body.dark-mode .sk-card-shell,
body.dark-mode .sk-card-shell:hover { border-color: var(--mint-dk-line-soft) !important; }
body.dark-mode .em-sk-nav { border-bottom-color: var(--mint-dk-line-soft); }
body.dark-mode .em-sk-nav .em-sk-switch { background-color: var(--mint-dk-overlay); }
body.dark-mode.em-embed .em-ghost-rows .g { background: var(--mint-dk-overlay); }
body.dark-mode.em-embed .em-ghost-rows .g.s { background: var(--mint-dk-raised); }
body.dark-mode.em-embed .em-ghost-rows .g.p { background: var(--mint-dk-line-soft); }
body.dark-mode.em-embed .em-ghost-note { border-top-color: var(--mint-dk-line-soft); color: var(--mint-dk-ink-3); }

/* ---- A18  the empty-state vignettes --------------------------------
   113 selectors across css/mint-buttons-v1.css:3100-3377 and :3844-3918,
   24 declarations of #fff, a 19-colour mist palette, no theme hook. All
   eleven drawings ship (grep of the markup confirms mv-plan, mv-doc,
   mv-place, mv-people, mv-group, mv-cobra, mv-flow, mv-invite, mv-family,
   mv-split, mv-time). Six use white as a SEPARATOR RING to cut a disc out
   of its ground; those re-point at --mv-cut so the ring keeps separating
   instead of inverting into a halo. Marks drawn ON a teal shape stay light;
   shapes punched THROUGH a surface take that surface's colour. The one
   teal per drawing is preserved because --mv-teal is a single token.       */
body.dark-mode {
  --mv-paper:   #27334a;
  --mv-paper-2: #202c40;
  --mv-paper-3: #1a2336;
  --mv-line:    #3f4d66;
  --mv-mist:    #38465e;
  --mv-mist-2:  #2c3a52;
  --mv-rail:    #45536d;
  --mv-cut:     #1e293b;
  --mv-glyph:   #e8eef6;
  --mv-teal:    #2aa39b;
  --mv-teal-line:#2f5f5a;
  --mv-neutral: #64748b;
  --mv-arc-2:   #4a5a72;
  --mv-lift:    0 8px 18px -8px rgba(0,0,0,.55);
}
body.dark-mode .mv::after { background: radial-gradient(ellipse at center, rgba(94,234,212,.10) 0%, rgba(94,234,212,0) 72%); }
body.dark-mode .mv .b { background: var(--mv-mist); }
body.dark-mode .mv-plan .c { background: var(--mv-paper); border-color: var(--mv-line); }
body.dark-mode .mv-plan .c3 { background: var(--mv-paper-3); border-color: var(--mv-line); }
body.dark-mode .mv-plan .c2 { background: var(--mv-paper-2); border-color: var(--mv-line); }
body.dark-mode .mv-plan .c1 { box-shadow: var(--mv-lift); }
body.dark-mode .mv-plan .tile { background: var(--mv-teal); box-shadow: 0 3px 8px -3px rgba(42,163,155,.55); }
body.dark-mode .mv-plan .tile::after { background: var(--mv-paper); }
body.dark-mode .mv-plan .l { background: var(--mv-mist); }
body.dark-mode .mv-plan .l.b { background: var(--mv-mist-2); }
body.dark-mode .mv-plan .price { background: var(--mv-mist); }
body.dark-mode .mv-plan .tier { background: var(--mv-mist-2); }
body.dark-mode .mv-doc .p { background: var(--mv-paper); border-color: var(--mv-line); }
body.dark-mode .mv-doc .p3 { background: var(--mv-paper-3); border-color: var(--mv-line); }
body.dark-mode .mv-doc .p2 { background: var(--mv-paper-2); }
body.dark-mode .mv-doc .p1 { box-shadow: var(--mv-lift); }
body.dark-mode .mv-doc .p1::before { border-color: var(--mv-paper) var(--mv-paper) var(--mv-mist) var(--mv-mist); }
body.dark-mode .mv-doc .t,
body.dark-mode .mv-doc .t2 { background: var(--mv-mist); }
body.dark-mode .mv-doc .t3,
body.dark-mode .mv-doc .t4 { background: var(--mv-mist-2); }
body.dark-mode .mv-doc .up { background: var(--mv-teal); box-shadow: 0 5px 12px -4px rgba(42,163,155,.55), 0 0 0 4px var(--mv-cut); }
body.dark-mode .mv-doc .up::before { background: var(--mv-glyph); }
body.dark-mode .mv-doc .up::after { border-left-color: var(--mv-glyph); border-top-color: var(--mv-glyph); }
body.dark-mode .mv-place .map { background: var(--mv-paper); border-color: var(--mv-line); box-shadow: var(--mv-lift); }
body.dark-mode .mv-place .road { background: var(--mv-mist); }
body.dark-mode .mv-place .blk { background: var(--mv-mist-2); }
body.dark-mode .mv-place .pin { background: var(--mv-teal); box-shadow: 3px -3px 12px -4px rgba(42,163,155,.6); }
body.dark-mode .mv-place .pin::after { background: var(--mv-paper); }
body.dark-mode .mv-people .av { background: var(--mv-mist); box-shadow: 0 0 0 4px var(--mv-cut); }
body.dark-mode .mv-people .av::before,
body.dark-mode .mv-people .av::after { background: var(--mv-cut); }
body.dark-mode .mv-people .a3 { background: var(--mv-mist-2); }
body.dark-mode .mv-people .a2 { background: var(--mv-teal); box-shadow: 0 0 0 4px var(--mv-cut), 0 7px 16px -6px rgba(42,163,155,.55); }
body.dark-mode .mv-group .t { background: var(--mv-paper); border-color: var(--mv-line); }
body.dark-mode .mv-group .t2,
body.dark-mode .mv-group .t3 { background: var(--mv-paper-2); }
body.dark-mode .mv-group .t::after { background: var(--mv-mist); }
body.dark-mode .mv-group .br { border-color: var(--mv-teal-line); }
body.dark-mode .mv-group .br::after { background: var(--mv-teal); box-shadow: 0 4px 10px -3px rgba(42,163,155,.55); }
body.dark-mode .mv-cobra .av { background: var(--mv-mist); box-shadow: 0 0 0 5px var(--mv-cut), var(--mv-lift); }
body.dark-mode .mv-cobra .av::before,
body.dark-mode .mv-cobra .av::after { background: var(--mv-cut); }
body.dark-mode .mv-cobra .clk { background: var(--mv-paper); border-color: var(--mv-teal); box-shadow: 0 6px 14px -5px rgba(42,163,155,.55); }
body.dark-mode .mv-cobra .clk::before,
body.dark-mode .mv-cobra .clk::after { background: var(--mv-teal); }
body.dark-mode .mv-flow .node { background: var(--mv-paper); border-color: var(--mv-line); }
body.dark-mode .mv-flow .root { background: var(--mv-teal); border-color: var(--mv-teal); box-shadow: 0 5px 12px -4px rgba(42,163,155,.5); }
body.dark-mode .mv-flow .root::after { background: rgba(232,238,246,.80); }
body.dark-mode .mv-flow .s::after { background: var(--mv-mist); }
body.dark-mode .mv-flow .stem,
body.dark-mode .mv-flow .spine,
body.dark-mode .mv-flow .drop { background: var(--mv-rail); }
body.dark-mode .mv-invite .card { background: var(--mv-paper); border-color: var(--mv-line); box-shadow: var(--mv-lift); }
body.dark-mode .mv-invite .slot { border-color: var(--mv-rail); }
body.dark-mode .mv-invite .l { background: var(--mv-mist); }
body.dark-mode .mv-invite .l.b { background: var(--mv-mist-2); }
body.dark-mode .mv-invite .steps i { background: var(--mv-mist); }
body.dark-mode .mv-invite .send { background: var(--mv-teal); box-shadow: 0 6px 14px -5px rgba(42,163,155,.6), 0 0 0 4px var(--mv-cut); }
body.dark-mode .mv-invite .send::after { background: var(--mv-glyph); }
body.dark-mode .mv-family .av { background: var(--mv-mist); box-shadow: 0 0 0 4px var(--mv-cut); }
body.dark-mode .mv-family .av::before,
body.dark-mode .mv-family .av::after { background: var(--mv-cut); }
body.dark-mode .mv-family .a1 { background: var(--mv-teal); box-shadow: 0 0 0 4px var(--mv-cut), 0 8px 18px -7px rgba(42,163,155,.55); }
body.dark-mode .mv-family .a2 { background: var(--mv-mist); }
body.dark-mode .mv-family .a3 { background: var(--mv-mist-2); }
body.dark-mode .mv-split .ring {
  background: conic-gradient(from -90deg, var(--mv-teal) 0 60%, var(--mv-arc-2) 60% 100%);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.6);
}
body.dark-mode .mv-split .ring::after { background: var(--mv-cut); }
body.dark-mode .mv-split .tag { background: var(--mv-paper); box-shadow: 0 2px 8px -2px rgba(0,0,0,.5), inset 0 0 0 1px var(--mv-line); }
body.dark-mode .mv-split .tag > b { background: var(--mv-mist); }
body.dark-mode .mv-split .t1 > i { background: var(--mv-teal); }
body.dark-mode .mv-split .t2 > i { background: var(--mv-neutral); }
body.dark-mode .mv-time .rail { background: var(--mv-rail); }
body.dark-mode .mv-time .ev { background: var(--mv-paper); border-color: var(--mv-line); }
body.dark-mode .mv-time .ev::after { background: var(--mv-mist); }
body.dark-mode .mv-time .e2,
body.dark-mode .mv-time .e3 { background: var(--mv-paper-2); }
body.dark-mode .mv-time .dot { background: var(--mv-cut); box-shadow: inset 0 0 0 2px var(--mv-rail); }
body.dark-mode .mv-time .d1 { background: var(--mv-teal); box-shadow: 0 0 0 4px rgba(42,163,155,.16); }
/* the page-local .mg drawing set, pasted into four broker pages */
body.dark-mode .mg .b,
body.dark-mode .mg .mark,
body.dark-mode .mg .pill,
body.dark-mode .mg-plan .cost { background: var(--mv-mist); }
body.dark-mode .mg .card { background: var(--mv-paper); border-color: var(--mv-line); }
body.dark-mode .mg-doc .mark { background: var(--mv-paper-2); border-color: var(--mv-line); }
body.dark-mode .mg-doc .mark::after { border-color: var(--mv-paper) var(--mv-paper) var(--mv-line) var(--mv-line); }
body.dark-mode .mg-time .row:not(:last-child)::before { background: var(--mv-rail); }
body.dark-mode .mg-time .dot { background: var(--mv-cut); border-color: var(--mv-rail); }
body.dark-mode .mg-enroll .ring { background: conic-gradient(var(--mv-arc-2) 0 62%, var(--mv-mist-2) 62% 100%); }
body.dark-mode .mg-enroll .ring::after,
body.dark-mode .mg-place .mark::after { background: var(--mv-cut); }
body.dark-mode .mg-hire .steps i { background: var(--mv-mist-2); }
body.dark-mode .mg-hire .steps i:nth-child(-n+2) { background: var(--mv-teal-line); }

/* ---- A19  icon artwork ---------------------------------------------
   js/mint-icons-v3.js uses currentColor 530 times, so 45 pages of
   iconography theme for free. 39 hexes are hardcoded on 14 named icons as
   SVG presentation attributes, which lose to any CSS rule, so those 14 are
   corrected without editing the file. The :not([fill="currentColor"]) guard
   keeps this off the several hundred that are already correct.             */
body.dark-mode i[data-mint-icon] svg [stroke]:not([stroke="none"]),
body.dark-mode svg[data-mint-icon] [stroke]:not([stroke="none"]) { stroke: var(--mint-dk-brand); }
body.dark-mode i[data-mint-icon] svg [fill]:not([fill="none"]):not([fill="currentColor"]),
body.dark-mode svg[data-mint-icon] [fill]:not([fill="none"]):not([fill="currentColor"]) { fill: var(--mint-dk-brand); }
body.dark-mode i[data-mint-icon="complete"] svg [stroke]:not([stroke="none"]),
body.dark-mode i[data-mint-icon="favorite"] svg [stroke]:not([stroke="none"]) { stroke: var(--mint-dk-success); }
/* filter: invert(0.7) on the slate #64748b lands on about #8b8479, a warm
   olive grey that exists nowhere in the palette, so the navbar icons were
   the only warm objects on a cool screen. brightness(0) collapses the glyph
   to black whatever its source colour, invert(1) lifts it to white, and
   opacity sets the exact grey. Deterministic and hue-neutral. */
body.dark-mode .navbar-custom-icon,
body.dark-mode .navbar-custom-icon-lg,
body.dark-mode .employee-icon { filter: brightness(0) invert(1); opacity: .62; }
body.dark-mode .navbar-icon-btn:hover .navbar-custom-icon-lg { opacity: .92; }
body.dark-mode .navbar-search-trigger .navbar-custom-icon { filter: brightness(0) invert(1); opacity: .55; }

/* ---- A20  scrollbars ------------------------------------------------
   The three dark rules already in this file (2470-2472) stay; this adds the
   ID-scoped case that outranks them.                                       */
body.dark-mode #customizeModal .modal-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,.26); }
body.dark-mode #customizeModal .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.42); }
body.dark-mode .em-menu::-webkit-scrollbar-thumb,
body.dark-mode .navbar-search-results::-webkit-scrollbar-thumb,
body.dark-mode .cdrop-menu::-webkit-scrollbar-thumb { background: var(--mint-dk-line); }

/* ---- A21  the Customize modal: two specificity failures -------------
   broker/companies.html:654 is `#customizeModal .form-label` and outranks
   the page's own `body.dark-mode .form-group label` at :67, so every field
   label rendered #374151 at 1.42:1 on the modal.
   broker/companies.html:665 is author-!important, which outranks the inline
   style="color:#64748b" on the same elements at :912 and :943, so the
   rendered colour was #6b7280 at 3.03:1 and nothing short of !important
   reaches it.                                                              */
body.dark-mode #customizeModal .form-label { color: var(--mint-dk-ink-3); }
body.dark-mode .favicon-logo-checkbox { color: var(--mint-dk-ink-2) !important; }
body.dark-mode .favicon-logo-checkbox strong { color: var(--mint-dk-ink) !important; }
body.dark-mode .logo-upload,
body.dark-mode .bg-preview { background: var(--mint-dk-well); border-color: var(--mint-dk-line-soft); }
body.dark-mode .logo-preview i,
body.dark-mode .bg-preview { color: var(--mint-dk-ink-3); }
/* broker/settings.html:36-52 redefines sixteen tokens and omits
   --brand-primary, so the ACTIVE left-nav item (:148-152) rendered #1f8f88
   on a tint compositing to about #1e3847: 3.10:1, failing AA. This is the
   one page a broker must reach to turn dark mode off. */
body.dark-mode .sidebar-nav-link.active,
body.dark-mode .sidebar-nav-link.active i { color: var(--mint-dk-brand); }


/* ==========================================================================
   A22  ::  THE MEASURED STRAGGLERS
   Not designed from reading the files. These are the selectors that were still
   painting a light fill after Block A landed, found by forcing dark on each
   page in a browser and ranking every element by lit area. Counts are from
   that run: company 17% of coloured area still light, plan 10%, employee 20%.

   Doubled .dark-mode gives (0,3,x) so these beat each page's own
   body.dark-mode block without !important and without editing any page.
   ========================================================================== */

/* Field boxes. The single biggest residue: 14 on the employee record, 9 on the
   plan page, plus their has-select variants. Each page already ships
   `body.dark-mode .field-box { background: var(--bg-card) }`, which loses to a
   later light declaration; this restates it at a weight that holds. */
body.dark-mode.dark-mode .field-box,
body.dark-mode.dark-mode .field-box.has-select,
body.dark-mode.dark-mode .comp-section,
body.dark-mode.dark-mode .media-content {
  background: var(--mint-dk-card);
  border-color: var(--mint-dk-line-soft);
  color: var(--mint-dk-ink);
}
body.dark-mode.dark-mode .field-box label,
body.dark-mode.dark-mode .field-box .field-label { color: var(--mint-dk-ink-3); }

/* ACA check cards: hardcoded #fff with an #e5e7eb hairline, no dark rule. */
body.dark-mode.dark-mode .aca-check-card,
body.dark-mode.dark-mode #tab-aca .aca-check-card {
  background: var(--mint-dk-card);
  border-color: var(--mint-dk-line-soft);
  color: var(--mint-dk-ink);
}

/* Report type tiles: a 10% brand wash that reads as a pale chip on dark. */
body.dark-mode.dark-mode .report-type-icon {
  background: var(--mint-dk-brand-wash);
  color: var(--mint-dk-brand);
}
body.dark-mode.dark-mode .report-type-card {
  background: var(--mint-dk-card);
  border-color: var(--mint-dk-line-soft);
}
body.dark-mode.dark-mode .report-type-card.active {
  border-color: var(--mint-dk-brand-edge);
  background: var(--mint-dk-raised);
}

/* Share buttons: #f8fafc fill, #e5e7eb edge. */
body.dark-mode.dark-mode .share-mini-btn {
  background: var(--mint-dk-well);
  border-color: var(--mint-dk-line);
  color: var(--mint-dk-ink-2);
}
body.dark-mode.dark-mode .share-mini-btn:hover {
  background: var(--mint-dk-brand-fill);
  border-color: var(--mint-dk-brand-edge);
  color: #ffffff;
}

/* Rate controls on the plan page. */
body.dark-mode.dark-mode .rate-control-select,
body.dark-mode.dark-mode .face-amount-controls .rate-control-select {
  background: var(--mint-dk-well);
  border-color: var(--mint-dk-line);
  color: var(--mint-dk-ink);
}

/* The active pill on the list and grid toggle, one of the named screenshot
   defects, plus the active main and company tab which stay white cards. */
body.dark-mode.dark-mode .view-btn.active,
body.dark-mode.dark-mode .company-tab.active,
body.dark-mode.dark-mode .main-tab.active {
  background: var(--mint-dk-card);
  color: var(--mint-dk-brand);
  border-color: var(--mint-dk-line-soft);
}

/* Status badges that carry a pale tint. */
body.dark-mode.dark-mode .status-badge.active {
  background: var(--mint-dk-brand-wash);
  color: var(--mint-dk-brand);
  border-color: var(--mint-dk-brand-edge);
}

/* Round avatar and logo tiles that default to a white plate. */
body.dark-mode.dark-mode .employee-icon,
body.dark-mode.dark-mode .company-logo-tile {
  background: var(--mint-dk-raised);
  color: var(--mint-dk-ink);
}

/* Outline and back buttons in page headers. */
body.dark-mode.dark-mode .btn.btn-outline,
body.dark-mode.dark-mode .btn-back,
body.dark-mode.dark-mode .btn-header.secondary,
body.dark-mode.dark-mode .header-btn.secondary {
  background: var(--mint-dk-raised);
  border-color: var(--mint-dk-line);
  color: var(--mint-dk-ink);
}
body.dark-mode.dark-mode .btn.btn-outline:hover,
body.dark-mode.dark-mode .btn-back:hover,
body.dark-mode.dark-mode .btn-header.secondary:hover,
body.dark-mode.dark-mode .header-btn.secondary:hover {
  background: var(--mint-dk-overlay);
  border-color: var(--mint-dk-line-hover);
}

/* ==========================================================================
   ICON-ONLY CONTROLS

   A button whose entire content is one glyph, and which pins its own square
   box inline, is not a text button. The INLINE-STYLED CONTROLS rule above
   stands down for it via :not([class*="mint-icon"]), because its 44px floor
   and 11px/18px padding have nowhere to go inside a 28px box: the padding
   wins, the glyph is flexed to zero width, and all that renders is the rule's
   own gradient and shadow. That is the blank raised square.

   Nothing here paints. The button keeps the appearance its inline style and
   its own hover handlers already give it, which is a flat glyph that washes
   on hover. The declarations below only guarantee the glyph is centred and
   that no inherited button chrome creeps back in.
   ========================================================================== */
body button.mint-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
  background-image: none;
  box-shadow: none;
  font-weight: inherit;
}
body button.mint-icon-btn > svg,
body button.mint-icon-btn > i {
  flex: none;
  pointer-events: none;
}