/* Mint's look, shared by every page: tokens, type, the shell (header, rail, page switches) and the shared
   components (buttons, fields, tables, cards, tabs, dialogs, toasts, chat, empty states).
   Linked last among the stylesheets in every page's <head>; each page group's own sheet (public/css/ui/<group>.css)
   follows it, and public/js/ui/mint-ui.js runs the shell. How redesign rules became these, and who owns what:
   port/CONVENTIONS.md.

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


/* ==== Tokens (from the redesign's 00-tokens.css) ====
   Colours, sizes and the font, shared by every page group's sheet.
   Layout source: mint-clone app/styles/tailwind.css and its layout, table, button and tab components.
   Brand source: Mint's own logo/mint-with-text.svg (wordmark #003a34, leaf #1f8f88) and page tokens. */

html:root {
  /* Interactive teal is one step deeper than the logo leaf (#1f8f88) so white labels and teal links pass 4.5:1. */
  --cs-leaf: #1f8f88;
  --cs-primary: #1a7a74;
  --cs-primary-hover: #125853;
  --cs-primary-deep: #125853;
  --cs-primary-light: #8ecbc8;
  --cs-primary-lighter: #bae4e2;
  --cs-primary-lightest: #1f8f880d;
  --cs-primary-tint: #1f8f881a;
  --cs-outline: #e9f4f4;
  --cs-tertiary: #003a34;
  --cs-fg: #09090b;
  --cs-muted: #71717a;
  --cs-success-fg: #15803d; /* status text in green, 5:1 on white */
  --cs-border: #e4e4e7;
  --cs-gray-50: #f9fafb;
  --cs-gray-100: #f3f4f6;
  --cs-gray-200: #e5e7eb;
  --cs-gray-400: #9ca3af;
  --cs-gray-500: #6b7280;
  --cs-gray-600: #4b5563;
  --cs-gray-700: #374151;
  --cs-slate-100: #f1f5f9;
  /* Focus halo: teal, with a teal border on fields, so focus passes 3:1 (Josiah, 2026-10-29). */
  --cs-ring: rgba(26, 122, 116, 0.25);
  --cs-ok-bg: #cffbda;
  --cs-ok-fg: #166534;
  --cs-ok-icon: #4bba87;
  --cs-warn-bg: #ffefca;
  --cs-warn-fg: #7a5a0f;
  --cs-warn-icon: #e5b854;
  --cs-bad-bg: #f7cfcd;
  --cs-bad-fg: #5c1914;
  /* Big status numbers and dots on white: brighter hues that still pass 3:1 for large text and icons. */
  --cs-warn-strong: #d97706;
  --cs-bad-strong: #dc2626;
  --cs-radius: 10px;
  --cs-radius-md: 8px;
  --cs-radius-xl: 14px;
  --cs-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --cs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --cs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --cs-header-h: 72px;
  --cs-rail-w: 64px;

  /* Point Mint's own page tokens at the clone palette. */
  --bg-primary: #ffffff;
  --bg-secondary: var(--cs-gray-100);
  --border-color: var(--cs-border);
  --brand-primary: var(--cs-primary);
  --brand-hover: var(--cs-primary-hover);
  /* Mint's secondary and muted text (#64748b, #9ca3af) fall under 4.5:1 on the gray canvas. */
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-tertiary: #6b7280;
  --mint-btn-line: var(--cs-border);
  --mint-btn-brand: var(--cs-primary);
  --mint-btn-brand-top: var(--cs-primary);
  --mint-btn-brand-edge: var(--cs-primary);
  --mint-btn-brand-press: var(--cs-primary-hover);

  /* Segmented control (level-2 tabs and list filters). */
  --cs-seg-track: #e7eeed;
  --cs-seg-hover: rgba(255, 255, 255, 0.6);
}

/* ==== Type: Mint Gothic ====
   Self-hosted font faces and clear I/l defaults live in /css/mint-typography.css.
   The body rule below applies the approved family without changing page sizing. */

/* ==== Ported from the redesign's 10-core.css ==== */
/* 10-core: the shell (header, rail, page switches), shared components (buttons, forms, tables, cards,
   tabs, segmented control, modals) and every broker-side page, including the company and employee records.
   Owner: Josiah. Rules for DM pages, the employee portal and the enrollment wizard go in their own files. */

html:root body {
  background: var(--cs-gray-100) !important;
  color: var(--cs-fg);
  font-family: "MintGothic", system-ui, sans-serif !important;
}
/* Not on the decision-maker portal: its links carry their own colours (grey menu, the district colour for the
   current page, amber in the amber banner), which this rule would turn Mint teal. */
html:root:not([data-cs-dm-portal]) body a { color: var(--cs-primary); }

/* ---------- Shell: header, rail, content offset ---------- */

html:root body header.topbar,
html:root body #shared-navbar {
  height: var(--cs-header-h) !important;
  min-height: var(--cs-header-h) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--cs-slate-100) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html:root body .topbar-inner {
  max-width: none !important;
  height: 100% !important;
  padding: 0 24px !important;
  margin: 0 !important;
}
html:root body .topbar .logo {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-left: -8px;
  border-radius: var(--cs-radius-md);
  transition: background-color 150ms;
}
html:root body .topbar .logo:hover { background: var(--cs-primary-lighter); }
html:root body .topbar .logo .logo-img { height: 30px !important; width: auto !important; max-width: 180px !important; object-fit: contain; }
/* An agency's logo (brokers whose agency has one) gets more room than the wordmark: these often carry a tagline. */
html:root body .topbar .logo .logo-img:not([src*="/logo/mint"]) { height: 40px !important; max-width: 200px !important; }

@media (min-width: 769px) {
  html:root.cs-shell body { padding-left: var(--cs-rail-w) !important; }
  html:root.cs-shell body .topbar-nav { display: none !important; }
  html:root.cs-shell body main,
  html:root.cs-shell body main.main {
    margin-top: var(--cs-header-h) !important;
  }
}

#cs-rail {
  display: none;
}
@media (min-width: 769px) {
  html:root.cs-shell #cs-rail {
    position: fixed;
    top: var(--cs-header-h);
    bottom: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--cs-rail-w);
    background: var(--cs-primary-lighter);
    box-shadow: var(--cs-shadow-md);
    transition: none;
    font-family: "MintGothic", system-ui, sans-serif;
  }
  html:root.cs-shell.cs-rail-open #cs-rail {
    width: 240px;
    padding: 0 12px;
    align-items: stretch;
  }
}
#cs-rail .cs-rail-top {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 0;
}
html.cs-rail-open #cs-rail .cs-rail-top { justify-content: flex-end; }
/* Help sits beside the collapse control without adding another navigation row. */
#cs-rail .cs-rail-help { display: none; }
html.cs-rail-open #cs-rail .cs-rail-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: auto;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--cs-primary-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
#cs-rail .cs-rail-help:hover span { text-decoration: underline; text-underline-offset: 3px; }
#cs-rail .cs-rail-toggle {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--cs-primary);
  cursor: pointer;
  transition: background-color 300ms, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 44px;
  height: 44px;
}
#cs-rail .cs-rail-toggle:hover { background: var(--cs-primary-lightest); }
#cs-rail .cs-rail-toggle:focus-visible,
#cs-rail a:focus-visible { outline: 3px solid var(--cs-ring); outline-offset: 2px; }
#cs-rail svg { width: 20px; height: 20px; flex: none; }
#cs-rail nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  gap: 16px;
}
html.cs-rail-open #cs-rail nav { align-items: stretch; gap: 4px; }
#cs-rail nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px;
  border-radius: 4px;
  color: var(--cs-primary) !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 44px;
  min-height: 44px;
  transition: background-color 150ms, color 150ms !important;
  transition-delay: 0ms !important;
}
#cs-rail nav a span { display: none; }
#cs-rail nav a:hover { background: var(--cs-primary-lightest); }
#cs-rail nav a.active {
  background: var(--cs-primary);
  color: #fff !important;
  box-shadow: var(--cs-shadow-sm);
  width: 44px;
  height: 44px;
}
html.cs-rail-open #cs-rail nav a { justify-content: flex-start; min-height: 44px; padding: 0 12px; width: auto; height: auto; }

html.cs-rail-open #cs-rail nav a span { display: inline; }

/* Page loader and fixed bars sit to the right of the rail. */
@media (min-width: 769px) {
  html:root.cs-shell body .page-loader { left: var(--cs-rail-w) !important; top: var(--cs-header-h) !important; }
  html:root.cs-shell body .pagination-bar { left: var(--cs-rail-w) !important; right: 0 !important; width: auto !important; }
}

/* User menu: square brand avatar, plain name. */
html:root body .user-menu-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px !important;
  border-radius: var(--cs-radius-md) !important;
}
html:root body .user-menu-btn:hover { background: var(--cs-gray-50) !important; }
html:root body .navbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--cs-primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html:root body .user-menu-btn .user-name { font-weight: 600 !important; color: var(--cs-fg) !important; font-size: 14px !important; }
html:root body .user-menu-btn .user-role { color: var(--cs-muted) !important; }
html:root body .navbar-dropdown-menu {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-lg) !important;
  padding: 4px 0 !important;
  margin-top: 6px !important; /* opens below the header, not under it */
}
html:root body .navbar-dropdown-item { color: var(--cs-gray-700) !important; border-radius: 0 !important; padding: 12px 16px !important; min-height: 44px !important; display: flex !important; align-items: center !important; }
html:root body .navbar-dropdown-item:hover { background: var(--cs-gray-50) !important; }
html:root body .navbar-dropdown-item.danger { color: #dc2626 !important; }
html:root body .navbar-search-trigger {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background: #fff !important;
  box-shadow: var(--cs-shadow-xs) !important;
  height: 44px !important;
}

/* ---------- Content area ---------- */

html:root body main.main,
html:root body main > .content-area,
html:root body .content-inner {
  max-width: none !important;
}
html:root.cs-shell body main.main { padding: 24px !important; }
html:root body h1 {
  color: #000 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Company record header: white bar, square icon tile, underline tabs. */
html:root body .company-header {
  background: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cs-slate-100) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: -24px -24px 24px !important;
  padding: 0 !important;
}
html:root body .company-header::before,
html:root body .company-header::after { display: none !important; }
html:root body .company-header-inner { max-width: none !important; padding: 24px 24px 0 !important; }
html:root body .company-header .company-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px !important;
  background: var(--cs-primary-lighter) !important;
  color: var(--cs-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:root body .company-header .company-name {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--cs-fg) !important;
}
html:root body .company-header .company-meta { color: var(--cs-gray-500) !important; }
html:root body .company-tabs-row { padding: 0 !important; border: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

/* Broker page headers (Library, Companies, Enrollments...) follow the same white header bar. */
html:root body .page-header {
  background: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cs-slate-100) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root.cs-shell body main > .page-header:first-child {
  margin: -24px -24px 24px !important;
  padding: 24px 24px 0 !important;
}
html:root body .page-header .page-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--cs-fg) !important;
  gap: 12px !important;
}
html:root body .page-header .page-title-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px !important;
  background: var(--cs-primary-lighter) !important;
  color: var(--cs-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:root body .page-header .page-subtitle { color: var(--cs-gray-500) !important; }
html:root body :is(.page-header .tabs, .employee-header .main-tabs) { gap: 28px !important; margin-top: 8px !important; }
html:root body :is(.page-header .tabs > .tab, .employee-header .main-tabs > .main-tab) {
  border-radius: 0 !important;
  padding: 16px 0 !important;
  font-size: 15px !important;
}
html:root body :is(.page-header .tabs > .tab.active, .employee-header .main-tabs > .main-tab.active) {
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--cs-primary) !important;
}

/* Employee record header. */
html:root body .employee-header {
  background: #fff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cs-slate-100) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root body .employee-header :is(.employee-avatar, .avatar, [class*="avatar"]):not(.navbar-user-avatar) {
  border-radius: 4px !important;
  background: var(--cs-primary-lighter) !important;
  color: var(--cs-primary) !important;
  box-shadow: none !important;
}
html:root body .content-area { background: var(--cs-gray-100) !important; }

/* Label-in-box fields (employee record): the box is the control, the inner input stays bare. */
html:root body .field-box {
  background: #fff !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
}
html:root body .field-box:focus-within { border-color: var(--cs-primary) !important; box-shadow: 0 0 0 3px var(--cs-ring) !important; }
html:root body .field-box :is(label, .field-label) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cs-gray-500) !important;
}

/* Main tab tracks become the clone's underline tabs. */
html:root body .company-tabs,
html:root body .mint-tab-rail {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 28px !important;
  border-radius: 0 !important;
}
html:root body .company-tabs > .company-tab {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  color: var(--cs-gray-500) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
html:root body .company-tabs > .company-tab:hover { color: var(--cs-gray-700) !important; }
html:root body .company-tabs > .company-tab.active {
  color: var(--cs-primary) !important;
  font-weight: 500 !important;
  box-shadow: inset 0 -3px 0 var(--cs-primary) !important;
}
html:root body .company-tabs > .company-tab::before,
html:root body .company-tabs > .company-tab::after,
html:root body .mint-tab-rail::before,
html:root body .mint-tab-rail::after { display: none !important; }

/* Chip tabs and sub tabs become the clone's soft pill tabs. */
html:root body .tabs,
html:root body .plans-tabs,
html:root body .filter-tabs,
html:root body .header-tabs,
html:root body .main-tabs,
html:root body .plan-tabs,
html:root body .benefits-subtab-bar,
html:root body .benefits-subtab-bar-inner,
html:root body .docs-subtab-bar,
html:root body .docs-subtabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 16px !important;
}
html:root body .tabs > .tab,
html:root body .plans-tabs > *,
html:root body .filter-tabs > *,
html:root body .header-tabs > *,
html:root body .main-tabs > *,
html:root body .plan-tabs > *,
html:root body .benefits-subtab,
html:root body .docs-subtab {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
  height: auto !important;
  min-height: 0 !important;
  color: var(--cs-gray-500) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
html:root body .tabs > .tab:hover,
html:root body .benefits-subtab:hover,
html:root body .docs-subtab:hover { color: var(--cs-gray-700) !important; }
html:root body .tabs > .tab.active,
html:root body .plans-tabs > .active,
html:root body .filter-tabs > .active,
html:root body .header-tabs > .active,
html:root body .main-tabs > .active,
html:root body .plan-tabs > .active,
html:root body .benefits-subtab.active,
html:root body .docs-subtab.active {
  background: var(--cs-primary-tint) !important;
  color: var(--cs-primary) !important;
  font-weight: 500 !important;
}
html:root body .benefits-subtab::after,
html:root body .docs-subtab::after { display: none !important; }

/* ---------- Buttons ---------- */

html:root body .btn,
html:root body button.btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  gap: 8px !important;
  border-radius: var(--cs-radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  background-image: none !important;
  text-shadow: none !important;
  transition: color 150ms, background-color 150ms, box-shadow 150ms !important;
}
html:root body .btn-sm,
html:root body .btn.btn-sm { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; }
html:root body .btn-primary,
html:root body .btn.is-brand,
html:root body .btn-header.is-brand {
  background: var(--cs-primary) !important;
  border: 1px solid var(--cs-primary) !important;
  color: #fff !important;
  box-shadow: var(--cs-shadow-xs) !important;
}
html:root body .btn-primary:hover,
html:root body .btn.is-brand:hover { background: var(--cs-primary-hover) !important; border-color: var(--cs-primary-hover) !important; }
html:root body .btn-secondary,
html:root body .btn-outline {
  background: var(--cs-outline) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-primary) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}
html:root body .btn-secondary:hover,
html:root body .btn-outline:hover { background: rgba(31, 143, 136, 0.15) !important; box-shadow: var(--cs-shadow-sm) !important; }
html:root body .btn-danger {
  background: #fee2e2 !important;
  border: 1px solid #fee2e2 !important;
  color: #f87171 !important;
  box-shadow: var(--cs-shadow-xs) !important;
}
html:root body .btn-danger:hover { background: #fecaca !important; }
html:root body .btn-ghost { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html:root body .btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--cs-ring) !important; }

/* ---------- Form controls ---------- */

html:root body :where(input:is([type="text"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="password"], [type="url"], [type="date"], :not([type]))):not(:where(.cs-keep, .field-value, .navbar-search-input, .field-box *, .employee-dropdown *, .search-box *, .filter-bar > input)), html:root body :where(select):not(:where(.cdrop-native, .field-value, .field-box *)), html:root body :where(textarea):not(:where(.field-value, .field-box *)), html:root body .form-input, html:root body .form-control, html:root body .cdrop-trigger {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background-color: #fff !important;
  color: var(--cs-fg) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html:root body input:is([type="text"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="password"], [type="url"], [type="date"]):focus, html:root body select:focus, html:root body textarea:focus, html:root body .cdrop-trigger:focus-visible {
  outline: none !important;
  border-color: var(--cs-primary) !important;
  box-shadow: 0 0 0 3px var(--cs-ring) !important;
}
/* A field card (.field-box) shows focus on itself; the bare input inside it draws no second ring. */
html:root body .field-box :is(input, select, textarea):focus {
  box-shadow: none !important;
}
html:root body .search-box,
html:root body .filter-group {
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
}
html:root body .search-box input,
html:root body .filter-group .cdrop-trigger,
html:root body .filter-group select {
  height: 44px !important;
}
html:root body :where(.form-group, .modal, .modal-content, form, .filter-group, .settings-section) label:not([style*="background"]), html:root body .form-label, html:root body .filter-label {
  color: var(--cs-gray-700) !important;
  font-weight: 500 !important;
}

/* ---------- Tables ---------- */

html:root body .table-container,
html:root body .table-wrapper,
html:root body .data-table-container,
html:root body .docs-section {
  background: #fff !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  box-shadow: none !important;
}
/* Desktop tables only: on phones Mint turns rows into cards and these paddings would break them. */
@media (min-width: 769px) {
html:root body main table:not(.cs-keep) thead th,
html:root body .data-table th,
html:root body .plans-table th,
html:root body .docs-table th {
  background: var(--cs-outline) !important;
  color: var(--cs-tertiary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 24px !important;
  border-bottom: 0 !important;
}
html:root body main table:not(.cs-keep) thead th :is(button, a, span, div):not(.col-filter-dropdown):not(.col-filter-dropdown *) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cs-tertiary) !important;
}
html:root body main table:not(.cs-keep) thead tr:first-child th:first-child { border-top-left-radius: var(--cs-radius) !important; }
html:root body main table:not(.cs-keep) thead tr:first-child th:last-child { border-top-right-radius: var(--cs-radius) !important; }
html:root body main table:not(.cs-keep) tbody td {
  padding: 16px 24px !important;
  border-top: 1px solid var(--cs-gray-200) !important;
  border-bottom: 0 !important;
  background: #fff;
  color: var(--cs-fg);
  font-size: 14px !important;
}
html:root body main table:not(.cs-keep) tbody tr:hover td { background: var(--cs-gray-50) !important; }
/* Tables outside <main> (Plans) get the header's 24px side padding too, so values sit under their headers. */
html:root body .data-table tbody td { padding-left: 24px !important; padding-right: 24px !important; }
}
/* Small laptops: the 24px on both sides of every cell made Companies, Library and the company Employees roster wider
   than a 1024px window (Mint itself steps down to 12px below 1200). Inner cell edges step down to 12px; the outer
   edges keep 24px, so the first column still lines up with the search field above. */
@media (min-width: 769px) and (max-width: 1279px) {
  html:root body main table:not(.cs-keep) :is(thead th, tbody td):not(:first-child) { padding-left: 12px !important; }
  html:root body main table:not(.cs-keep) :is(thead th, tbody td):not(:last-child) { padding-right: 12px !important; }
}
/* At 1024 and below, Mint's own 10px step, so Library's seven columns fit too. */
@media (min-width: 769px) and (max-width: 1024px) {
  html:root body main table:not(.cs-keep) :is(thead th, tbody td):not(:first-child) { padding-left: 10px !important; }
  html:root body main table:not(.cs-keep) :is(thead th, tbody td):not(:last-child) { padding-right: 10px !important; }
}

/* Mint text that fell under the floor: the Documents count badge (#64748b on #e5e7eb, 3.84:1), the Library page
   count under a document name (11.25px #9ca3af, 2.54:1) and the Contacts company initials (9px #8fa0b0, 2.50:1). */
html:root body .docs-section-count { color: var(--cs-gray-700) !important; }
html:root body .doc-meta { font-size: 12px !important; color: var(--cs-gray-500) !important; }
html:root body .em-co-initials { font-size: 10px !important; color: var(--cs-gray-600) !important; }
/* Dashboard onboarding link actions (Copy, Email) were 25px tall: the 36px compact target. */
html:root body .onboard-actions .action-link { min-height: 36px !important; display: inline-flex !important; align-items: center !important; }

/* ---------- Cards ---------- */

html:root body :where(.card, [class$="-card"], [class*="-card "]):not(:where(.mv *, .mg *, .cs-keep, [class*="cobra-detail"], [class*="modal"])) {
  background-color: #fff;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow: var(--cs-shadow-sm) !important;
}

/* ---------- Badges and status pills ---------- */

html:root body :is(.status-pill, .status-badge, .badge, .plan-badge, .role-badge) {
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  border: 1px solid transparent !important;
}
html:root body .status-pill.green { background: var(--cs-ok-bg) !important; color: var(--cs-ok-fg) !important; }
html:root body .status-pill.green .status-dot { background: var(--cs-ok-icon) !important; }
html:root body .status-pill.red { background: var(--cs-bad-bg) !important; color: var(--cs-bad-fg) !important; }
html:root body .status-pill.red .status-dot { background: #d64541 !important; }
html:root body :is(.status-pill.yellow, .status-pill.amber, .status-pill.orange) { background: var(--cs-warn-bg) !important; color: var(--cs-warn-fg) !important; }
html:root body :is(.status-pill.yellow, .status-pill.amber, .status-pill.orange) .status-dot { background: var(--cs-warn-icon) !important; }
html:root body .status-pill.gray { background: var(--cs-gray-100) !important; color: var(--cs-gray-500) !important; }
html:root body .status-pill:has(> .status-dot) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--cs-fg) !important;
}
html:root body .status-pill > .status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
}
html:root body .status-pill:has(> .status-dot.green) { background: var(--cs-ok-bg) !important; color: var(--cs-ok-fg) !important; }
html:root body .status-pill > .status-dot.green { background: var(--cs-ok-icon) !important; }
html:root body .status-pill:has(> .status-dot.red) { background: var(--cs-bad-bg) !important; color: var(--cs-bad-fg) !important; }
html:root body .status-pill > .status-dot.red { background: #d64541 !important; }
html:root body .status-pill:has(> :is(.status-dot.yellow, .status-dot.amber, .status-dot.orange)) { background: var(--cs-warn-bg) !important; color: var(--cs-warn-fg) !important; }
html:root body .status-pill > :is(.status-dot.yellow, .status-dot.amber, .status-dot.orange) { background: var(--cs-warn-icon) !important; }
html:root body .status-pill:has(> .status-dot.gray) { background: var(--cs-gray-100) !important; color: var(--cs-gray-600) !important; }
html:root body .status-pill > .status-dot.gray { background: var(--cs-gray-400) !important; }

/* ---------- Modals ---------- */

/* Dim plus a light blur behind dialogs, so busy pages do not compete with them (Josiah, 2026-10-29). */
html:root body .modal-overlay { background: rgba(0, 0, 0, 0.5) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }
html:root body .modal-overlay > .modal,
html:root body .modal-overlay > .modal-content {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  box-shadow: var(--cs-shadow-lg) !important;
}
html:root body .modal-header h2,
html:root body .modal-header h3 { font-size: 18px !important; font-weight: 600 !important; color: var(--cs-fg) !important; }

/* ---------- Pagination ---------- */

/* Keep legacy page-specific overrides from splitting the shared pager states. */
@layer mint-pagination {
/* Quiet text controls; the current page and hover use Mint's flat fills. */
html:root:not(#ui) body :is(.page-btn, .page-num, .pagination-btn, .em-pager-btns > button) {
  border-radius: var(--cs-radius-md) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cs-gray-700) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}
html:root:not(#ui) body :is(.page-btn, .page-num, .pagination-btn, .em-pager-btns > button):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cs-primary-lightest) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body :is(.page-btn, .page-num, .pagination-btn, .em-pager-btns > button):is(.active, [aria-current="page"], :active):not(:disabled) {
  background: var(--cs-primary-tint) !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 700 !important;
}
html:root:not(#ui) body :is(.page-btn, .page-num, .pagination-btn, .em-pager-btns > button):is(:disabled, [aria-disabled="true"]) {
  background: transparent !important;
  color: var(--cs-gray-500) !important;
  opacity: 0.45 !important;
  cursor: default !important;
}
html:root:not(#ui) body :is(.page-btn, .page-num, .pagination-btn, .em-pager-btns > button):focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body :is(.page-btn, .page-num, .pagination-btn, .em-pager-btns > button) { transition: none !important; }
}
}

/* ---------- Broker port pass: one layout for every broker page ---------- */

/* Pages built on div.main get the same shell as main.main. */
@media (min-width: 769px) {
  html:root.cs-shell body div.main { margin-top: var(--cs-header-h) !important; padding: 24px !important; }
}
html:root.cs-shell body .main > .page-header:first-child {
  margin: -24px -24px 24px !important;
  padding: 24px !important;
}
html:root.cs-shell body .main > .page-header:first-child:has(.tabs) { padding-bottom: 0 !important; }
html:root body .page-header-inner { max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* The page body runs the full width; its white panel becomes a card that lines up with the title. */
html:root.cs-shell body .main > .content {
  max-width: none !important;
  margin: 0 !important;
  padding: 4px 24px 24px !important;
  background: #fff !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}
html:root.cs-shell body .main > .content .content-card { border: 0 !important; box-shadow: none !important; }
html:root.cs-shell body .main > .content:is(:has(> .stats-row), :has(> .layout), #content) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header without tabs: the shared navbar on the company page carried its own side padding. */
html:root body header#shared-navbar.topbar { padding: 0 !important; }

/* Employee record: full-bleed white header like the company record. */
html:root.cs-shell body .main > .employee-header:first-child {
  margin: -24px -24px 24px !important;
  padding: 24px 24px 0 !important;
}
html:root body .employee-header .header-inner { max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* Dashboard: the "sent" popover opens from a link at the right edge; keep it on screen. */
html:root body .sent-dropdown { left: auto !important; right: 0 !important; transform: translateY(-8px) !important; }
html:root body .sent-dropdown.open { transform: translateY(0) !important; }
html:root body .sent-dropdown::before { left: auto !important; right: 24px !important; }

/* Selects the page left without a house class (campaigns company picker and modal selects). */
html:root body :is(.main, main) select:not([class]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 44px !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  font: 500 14px/1 "MintGothic", system-ui, sans-serif !important;
  color: var(--cs-fg) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}
html:root body :is(.main, main) select:not([class]):focus-visible { outline: none !important; border-color: var(--cs-primary) !important; box-shadow: 0 0 0 3px var(--cs-ring) !important; }

/* Pages that have no shared navbar (census import, rate book): the rail runs top to bottom. */
@media (min-width: 769px) {
  html:root.cs-shell.cs-no-topbar #cs-rail { top: 0; }
}

/* Company record sub-tab bars broke out with 100vw; with the rail that ran past the right edge. */
html:root.cs-shell body :is(.benefits-subtab-bar, .docs-subtab-bar, .em-delivery-notice) {
  width: auto !important;
  left: 0 !important;
  transform: none !important;
}

/* Client onboarding: the search box is the control, its inner input stays bare. */
html:root body .filter-bar > input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  height: auto !important;
  font: inherit !important;
}

/* Phones: navbar.js caps page blocks at 100%, which cut the bleeding header short. */
html:root.cs-shell body .main > :is(.page-header, .employee-header):first-child { max-width: none !important; width: auto !important; }
@media (max-width: 768px) {
  html:root.cs-shell body .main > .content:not(:has(> .stats-row)):not(#content) { padding: 4px 16px 16px !important; }
}

/* ---------- Production pass: usable as a real rebrand ---------- */

/* The expanded rail pushes the page instead of covering it, from a 1280px window. Narrower, pushing left too little
   room for Mint's record tables (they ran off their cards), so there it covers the page and the content keeps its width. */
@media (min-width: 1280px) {
  html:root.cs-shell.cs-rail-anim body { transition: padding-left 300ms cubic-bezier(0.25, 1, 0.5, 1); }
  html:root.cs-shell.cs-rail-open body { padding-left: 240px !important; }
  html:root.cs-shell.cs-rail-open body .page-loader { left: 240px !important; }
  html:root.cs-shell.cs-rail-open body .pagination-bar { left: 240px !important; }
}
@media (min-width: 769px) and (max-width: 1279px) {
  html:root.cs-shell.cs-rail-open #cs-rail { box-shadow: 4px 0 20px rgba(16, 24, 40, 0.12); }
}

/* One select look everywhere: Mint's chevron, no native arrow. */
html:root body :where(select):not(:where(.cdrop-native, .field-value, .field-box *, [multiple], [size])) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
}
html:root body :is(.modal, .modal-content, form, .form-group) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(.field-value), select:not([multiple]):not([size]):not(.field-value)) {
  min-height: 44px !important;
}

/* Rail targets meet Mint's 44px rule. */
html.cs-rail-open #cs-rail nav a.active { width: auto; height: auto; }

/* Mint's focus ring: 2px brand outline, 2px offset, on every interactive control. */
html:root body :is(.btn, button, a, [role="tab"], .company-tab, .tab, .docs-subtab, .benefits-subtab):focus-visible, #cs-rail :is(a, .cs-rail-toggle):focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Company record: content starts on the same left edge as the company name, no stray rule under the tabs. */
html:root.cs-shell body .main > .content-area { border-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html:root.cs-shell body .main > .content-area > .content-inner { padding: 0 !important; }

/* ---------- Review fixes: company and employee records (2026-10-28) ---------- */

/* Disabled primary actions read as disabled. */
html:root body :is(.btn-primary, .btn.is-brand, .bdoc-btn-primary, .aca-btn-primary, .locations-empty-btn, .btn-enroll, .btn-save-slug, .btn-connect, .btn-generate, .controls-add, .confirm-btn, .upload-btn, .empty-state-btn, .nh-trigger-btn):is(:disabled, [aria-disabled="true"], .disabled) {
  background: var(--cs-gray-200) !important;
  border-color: var(--cs-gray-200) !important;
  color: var(--cs-gray-400) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Upload buttons built as painted labels keep their white text. */
html:root body label[style*="background"] { color: #fff !important; }

/* Record headers span the full width on phones too (navbar.js caps them at 100%). */
html:root.cs-shell body .company-header { max-width: none !important; width: auto !important; }

/* Active main tab: Mint's own active and hover rules (44px box, tinted fill) lose to these. */
html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab):is(.active, :hover, .active:hover) {
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
html:root body .company-tabs.company-tabs > .company-tab { padding: 16px 0 !important; }

/* ACA year picker: the pill is the control, its select stays bare. */
html:root body .aca-year-pill select {
  border: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  height: 36px !important;
  min-height: 0 !important;
  padding-right: 0 !important;
}

/* Sub-tabs: one soft-pill look, starting on the content edge, never like the main tabs. */
html:root body :is(.benefits-subtab-bar, .docs-subtab-bar, .subtab-bar):not(#subtabBar) {
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
html:root body :is(.benefits-subtab-bar-inner, .docs-subtab-bar-inner, .subtab-bar-inner) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}
html:root body :is(.benefits-subtab.benefits-subtab, .subtab.subtab, .docs-subtab.docs-subtab) {
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  height: 44px !important;
}
html:root body :is(.benefits-subtab.benefits-subtab, .subtab.subtab, .docs-subtab.docs-subtab):hover { color: var(--cs-primary) !important; background: var(--cs-primary-lightest) !important; }
html:root body :is(.benefits-subtab.benefits-subtab, .subtab.subtab, .docs-subtab.docs-subtab).active {
  background: var(--cs-primary-tint) !important;
  box-shadow: none !important;
  color: var(--cs-primary-deep) !important;
}
html:root body :is(.benefits-subtab, .subtab, .docs-subtab)::after { display: none !important; }

/* Buttons Mint paints outside the shared button classes. */
html:root body :is(.btn-enroll, .locations-empty-btn, .bdoc-btn-primary, .aca-btn-primary) {
  background: var(--cs-primary) !important;
  background-image: none !important;
  border: 1px solid var(--cs-primary) !important;
  color: #fff !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  text-shadow: none !important;
}
html:root body :is(.btn-enroll, .locations-empty-btn, .bdoc-btn-primary, .aca-btn-primary):not(:disabled):hover { background: var(--cs-primary-hover) !important; border-color: var(--cs-primary-hover) !important; }
html:root body :is(.btn:not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.btn-danger):not(.btn-ghost):not(.is-brand):not(.btn-enroll), .bdoc-btn-quiet, .btn-export, .aca-quick-btn, .nh-configure-btn, .profile-edit-btn) {
  background: var(--cs-outline) !important;
  background-image: none !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-primary) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  text-shadow: none !important;
}
html:root body .btn-enroll { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; }
html:root body :is(.send-onboarding-btn, .btn-enrollment-completed, .mint-icon-btn) { min-height: 36px !important; }
html:root body .mint-icon-btn { min-width: 36px !important; }

/* Pagination: even 36px squares. */
html:root body .pagination-bar :is(.page-btn, .page-num) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  height: 44px !important;
  min-width: 44px !important;
}

/* Company switcher: no tinted panel across the header. */
html:root body .company-switcher-trigger {
  background: transparent !important;
  box-shadow: none !important;
  width: fit-content !important;
  margin-left: -12px !important;
}
html:root body .company-switcher-trigger:hover { background: var(--cs-gray-50) !important; }

/* Destructive icon buttons stay red. */
html:root body .btn-icon-danger { color: #dc2626 !important; background: #fff !important; border-color: #fecaca !important; }

/* Checkboxes and radios in Mint teal. */
html:root body input:is([type="checkbox"], [type="radio"]) { accent-color: var(--cs-primary) !important; }

/* Two-column modal rows line up. */
html:root body .modal-body .form-row .form-group + .form-group { margin-top: 0 !important; }

/* One header rhythm for the company and employee records. */
html:root body .company-tabs.company-tabs { margin-top: 4px !important; }

/* Phones: tighter gutters, names on one line, toolbars wrap instead of running off screen. */
@media (max-width: 768px) {
  html:root.cs-shell body :is(main.main, div.main) { padding: 16px 16px 100px !important; }
  html:root.cs-shell body .main > :is(.page-header, .employee-header, .company-header):first-child { margin: -16px -16px 16px !important; padding: 16px 16px 0 !important; }
  html:root.cs-shell body .main > .page-header:first-child:not(:has(.tabs)) { padding-bottom: 16px !important; }
  html:root body .content-area, html:root body .content-inner { padding-left: 0 !important; padding-right: 0 !important; }
  html:root body .company-header .company-name { font-size: 20px !important; }
}
@media (max-width: 768px) {
  html:root body :is(.controls, .benefits-controls, .docs-header, .section-header, .filters-row, .toolbar) { flex-wrap: wrap !important; gap: 8px !important; }
  html:root body .modal :is(input, select) { max-width: 100% !important; }
}

/* Rail brand mark on pages without Mint's header. */
#cs-rail .cs-rail-brand { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 14px auto 0; border-radius: var(--cs-radius-md); }
#cs-rail .cs-rail-brand img { width: 26px; height: 26px; }
html.cs-rail-open #cs-rail .cs-rail-brand { margin: 14px 0 0 8px; }
html.cs-no-topbar #cs-rail .cs-rail-top { padding-top: 8px; }

/* Employee record: section content starts on the same edge as the header and sub-tabs. */
html:root.cs-shell body .tab-content > .content-inner { padding: 0 !important; }

/* ---------- Review fixes: broker top-level pages (2026-10-28) ---------- */

/* Every shell clears the 72px header at every width; phones keep room for Mint's bottom nav. */
html:root.cs-shell body :is(main.main, div.main) { margin-top: var(--cs-header-h) !important; }
html:root.cs-shell body div.main { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 768px) {
  html:root.cs-shell body .main > .content:has(table) { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html:root body .sent-dropdown { position: fixed !important; left: 16px !important; right: 16px !important; width: auto !important; }
}
html:root body .action-btn { white-space: nowrap !important; }

/* Emails: the white tab bar spans the page at every width. */

/* Library page tabs: every tab the same height, so the active label does not drop. */
html:root.cs-shell body .main > .page-header .tabs.tabs > .tab.tab { height: 53px !important; min-height: 0 !important; align-items: center !important; }

/* Mint's raised look on active rail pills. */
html:root body .mint-tab-rail.mint-tab-rail > .active { box-shadow: none !important; }

/* The chat button never sits on top of an open dialog. */
html:root body:has(.modal-overlay:is(.active, .open, .show, .visible, [style*="flex"], [style*="block"])) #chatAiBtn { display: none !important; }

/* Settings: its layout already clears the header; the form column starts beside the settings nav. */
html:root.cs-shell body main.settings-main { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 760px !important; padding: 32px 40px !important; }
html:root body .settings-layout { padding-top: var(--cs-header-h) !important; }
html:root body .settings-sidebar { top: var(--cs-header-h) !important; }

/* One typeface for controls too (browsers default buttons and inputs to Arial). */
html:root body :is(button, input, select, textarea) { font-family: inherit !important; }

/* Pages outside the shared navbar: left-aligned on the content edge like every other page. */
html:root.cs-shell:is(.cs-no-topbar, .cs-added-navbar) body .wrap { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 24px !important; padding-right: 24px !important; }

/* Cards inside cards: empty states inside the page card lose their own box. */
html:root.cs-shell body .main > .content :is(.empty-state, .empty-enrollments) { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* Controls Mint sizes outside the shared classes: 44px, or 36px for small and icon controls. */
html:root body :is(.switcher-search, #slugIn, #slugInput, .btn-back, .btn-upload, .confirm-modal-confirm, .confirm-modal-cancel, .confirm-modal-btn) { min-height: 44px !important; }
html:root body :is(.view-btn, .action-btn, .plans-tab, .em-chip, .copy-btn, .category-pill, .back-to-forms-btn, .onboard-edit-btn) { min-height: 36px !important; }
html:root body :is(.view-btn, .action-btn, .onboard-edit-btn, .generate-modal-close, .format-toast-close, .modal-close) { min-width: 36px !important; }
html:root body :is(.generate-modal-close, .format-toast-close, .modal-close) { min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* Secondary buttons Mint paints on its own: same teal-tint outline as the rest. */
html:root body :is(.btn-forms-library, .text-drops-btn, .company-switcher-btn, .back-btn, .template-callout-btn, .back-to-forms-btn, .btn-back, .btn-cancel, .confirm-modal-cancel) {
  background: var(--cs-outline) !important;
  background-image: none !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-primary) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}

/* Small or faint text brought up to a readable size and contrast. */
html:root body .onboard-label { font-size: 12px !important; color: var(--cs-gray-500) !important; }
html:root body .url-text { font-size: 12px !important; }

/* Off-brand blue on the census template callout. */
html:root body .template-callout { background: var(--cs-outline) !important; background-image: none !important; border-color: var(--cs-primary-lighter) !important; }

/* Dashboard greeting gets the same white header band as every other page. */
html:root.cs-shell body .main > .dashboard-header:first-child {
  margin: -24px -24px 24px !important;
  padding: 24px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--cs-slate-100) !important;
}
html:root body .dashboard-header .greeting h1 { font-size: 24px !important; font-weight: 700 !important; }

/* Pages Mint ships without its header (rate book, client onboarding) get a brand bar. */
#cs-brandbar { display: none; }
html:root.cs-shell.cs-brandbar #cs-brandbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 98;
  display: flex;
  align-items: center;
  height: var(--cs-header-h);
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--cs-slate-100);
}
#cs-brandbar a { display: inline-flex; align-items: center; height: 44px; }
#cs-brandbar img { height: 30px; width: auto; }
html:root.cs-shell:is(.cs-brandbar, .cs-added-navbar) body { padding-top: var(--cs-header-h) !important; }

/* Mint's 2FA reminder banner (navbar.js) is fixed at 70px over the first 45px of every page, and Mint's own
   `.main { margin-top: 110px }` loses to the theme's layout. Here it sits under the header and right of the rail at a
   set height, and the page moves down by that height while it shows (dismissing removes the class). */
html:root.cs-shell body.has-2fa-banner { --cs-2fa-h: 48px; padding-top: var(--cs-2fa-h) !important; }
html:root.cs-shell:is(.cs-brandbar, .cs-added-navbar) body.has-2fa-banner { padding-top: calc(var(--cs-header-h) + var(--cs-2fa-h)) !important; }
html:root.cs-shell body .twofa-security-banner {
  top: var(--cs-header-h) !important;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--cs-2fa-h);
  padding: 0 24px !important;
  box-sizing: border-box;
}
html:root.cs-shell body.has-2fa-banner .settings-sidebar,
html:root.cs-shell.cs-added-navbar body.has-2fa-banner[data-broker-page="census-import"] > .header {
  top: calc(var(--cs-header-h) + var(--cs-2fa-h)) !important;
}
@media (min-width: 769px) {
  html:root.cs-shell body.has-2fa-banner .twofa-security-banner { left: var(--cs-rail-w); }
}
@media (min-width: 1280px) {
  html:root.cs-shell.cs-rail-open body.has-2fa-banner .twofa-security-banner { left: 240px; }
}
@media (max-width: 768px) {
  /* The message wraps to two lines on phones. */
  html:root.cs-shell body.has-2fa-banner { --cs-2fa-h: 64px; }
}
@media (min-width: 769px) {
  html:root.cs-shell.cs-brandbar #cs-rail { top: var(--cs-header-h); }
  html:root.cs-shell.cs-brandbar #cs-rail .cs-rail-brand { display: none; }
}

/* ---------- Review fixes: interaction and contrast (2026-10-28) ---------- */

/* Rail: deep teal on the light-teal rail (about 6:1), and a focus ring that shows at once. */
#cs-rail nav a:not(.active),
#cs-rail .cs-rail-toggle { color: var(--cs-primary-deep) !important; }
#cs-rail :is(a, .cs-rail-toggle):focus-visible { outline: 2px solid var(--cs-primary-deep) !important; outline-offset: 2px !important; }
#cs-rail nav a.active:focus-visible { outline-color: var(--cs-tertiary) !important; }

/* Active tab text in deep teal (the underline and fill stay Mint teal); inactive sub-tabs darker. */
html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab).active { color: var(--cs-primary-deep) !important; font-weight: 600 !important; }
html:root body :is(.benefits-subtab.benefits-subtab, .subtab.subtab, .docs-subtab.docs-subtab):not(.active) { color: var(--cs-gray-700) !important; }

/* Mint's 44px rule for tabs, filter tabs, menu items, pagination and header search. */
html:root body .filter-tabs > * { min-height: 44px !important; }
@media (max-width: 768px) {
  html:root body :is(.view-btn, .action-btn) { min-height: 44px !important; min-width: 44px !important; }
  html:root body :is(.plans-filters, .benefits-filters, .plans-toolbar, .benefits-toolbar, .plans-filter-row) { flex-wrap: wrap !important; gap: 8px !important; }
  html:root body .plans-filter-select { max-width: 100% !important; }
}

/* Company Documents sub-tabs: Mint scopes these by #tab-documents, so the pill look needs the id too. */
html:root body #tab-documents .docs-subtab-bar.docs-subtab-bar { margin: 0 0 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html:root body #tab-documents .docs-subtab-bar-inner.docs-subtab-bar-inner { max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; }
html:root body #tab-documents .docs-subtab.docs-subtab {
  height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: var(--cs-radius-md) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
}
html:root body #tab-documents .docs-subtab.docs-subtab:hover { background: var(--cs-primary-lightest) !important; color: var(--cs-primary) !important; }
html:root body #tab-documents .docs-subtab.docs-subtab.active { background: var(--cs-primary-tint) !important; color: var(--cs-primary-deep) !important; }
html:root body #tab-documents .docs-subtab.docs-subtab::after { display: none !important; }
html:root body #tab-documents .docs-subtab.docs-subtab, html:root body #tab-documents .docs-subtab.docs-subtab.active { border: 0 !important; border-bottom: 0 !important; font-size: 14px !important; }
html:root body #tab-documents .docs-subtab.docs-subtab.docs-subtab:is(.active, :not(.active))::after { display: none !important; content: none !important; }
html:root body #tab-documents .docs-subtab.docs-subtab.docs-subtab:is(.active, :not(.active)) { border-radius: var(--cs-radius-md) !important; box-shadow: none !important; }

/* Page switches: the rail area and header space are in place from the first frame. */
@media (min-width: 769px) {
  html.cs-rail-anim #cs-rail { transition: width 300ms cubic-bezier(0.25, 1, 0.5, 1), padding 300ms cubic-bezier(0.25, 1, 0.5, 1); }
  html:root.cs-shell body::before {
    content: "";
    position: fixed;
    top: var(--cs-header-h);
    bottom: 0;
    left: 0;
    width: var(--cs-rail-w);
    background: var(--cs-primary-lighter);
    z-index: 98;
    pointer-events: none;
  }
  html:root.cs-shell.cs-rail-open body::before { width: 240px; }
  html:root.cs-shell.cs-no-topbar body::before { top: 0; }
  html:root.cs-shell.cs-brandbar body::before { top: var(--cs-header-h); }
}
/* Hover reveals the collapsed rail over the page. Its icon targets stay put. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  html:root.cs-shell:not(.cs-rail-open) #cs-rail {
    align-items: flex-start;
    overflow: hidden;
    transition: width 200ms cubic-bezier(.2,.8,.2,1);
  }
  html:root.cs-shell:not(.cs-rail-open).cs-rail-peek #cs-rail {
    width: 240px;
    padding: 0;
    box-shadow: none;
  }
  html:root:not(.cs-rail-open) #cs-rail nav {
    width: 220px;
    margin: 0 10px;
    align-items: flex-start;
  }
  html:root:not(.cs-rail-open) #cs-rail nav a {
    justify-content: flex-start;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0 12px;
    overflow: hidden;
    transition: width 200ms cubic-bezier(.2,.8,.2,1), background-color 150ms, color 150ms !important;
  }
  html:root:not(.cs-rail-open) #cs-rail nav a span {
    display: inline;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 100ms ease, transform 160ms ease;
  }
  html:root:not(.cs-rail-open).cs-rail-peek #cs-rail nav a { width: 220px; }
  html:root:not(.cs-rail-open).cs-rail-peek #cs-rail nav a span { opacity: 1; transform: none; }
  html:root:not(.cs-rail-open) #cs-rail .cs-rail-top {
    position: relative;
    width: 240px;
    padding: 24px 10px;
    justify-content: flex-start;
  }
  html:root:not(.cs-rail-open) #cs-rail .cs-rail-toggle {
    flex: 0 0 44px;
    transform: translateX(0);
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), background-color 150ms;
  }
  html:root:not(.cs-rail-open).cs-rail-peek #cs-rail .cs-rail-toggle { transform: translateX(174px); }
  html:root:not(.cs-rail-open) #cs-rail .cs-rail-help {
    position: absolute;
    left: 12px;
    top: 24px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--cs-primary-deep);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 100ms ease;
  }
  html:root:not(.cs-rail-open).cs-rail-peek #cs-rail .cs-rail-help { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html:root.cs-shell #cs-rail,
  html:root.cs-shell #cs-rail nav a,
  html:root.cs-shell #cs-rail nav a span,
  html:root.cs-shell #cs-rail .cs-rail-toggle,
  html:root.cs-shell #cs-rail .cs-rail-help { transition: none !important; }
}
/* Rail links switch instantly; the rail itself never fades in. */
#cs-rail, #cs-rail * { animation: none !important; }
@media (min-width: 769px) {
  /* Header space is painted from the first frame too, until navbar.js adds the real header on top. The logo is the one
     the previous page drew (mint-ui.js sets the --cs-header-logo variables), else Mint's wordmark. */
  html:root.cs-shell:is(:not(.cs-no-topbar), .cs-brandbar) body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cs-header-h);
    /* Mint's logo/mint-with-text.svg, inlined so it paints with the sheet instead of a frame later. */
    background: #fff var(--cs-header-logo, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201292.89%20482.56%22%20role%3D%22img%22%20aria-label%3D%22Mint%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.mint-wordmark%20%7B%20fill%3A%20%23003a34%3B%20%7D%20.mint-leaf%20%7B%20fill%3A%20%231f8f88%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%3E%20%3Cpath%20class%3D%22mint-wordmark%22%20d%3D%22M0%2C298.81c0-101%2C58.64-146.61%2C134.88-146.61%2C48.22%2C0%2C87.97%2C20.2%2C111.42%2C57.99%2C22.81-37.79%2C62.55-57.99%2C111.42-57.99%2C76.24%2C0%2C134.88%2C45.61%2C134.88%2C146.61v183.75h-77.54v-183.75c0-52.78-27.37-74.28-65.16-74.28s-64.51%2C22.15-64.51%2C74.28v183.75h-77.54v-183.75c0-52.13-28.02-74.28-65.16-74.28s-65.16%2C21.5-65.16%2C74.28v183.75H0v-183.75Z%22%2F%3E%20%3Crect%20class%3D%22mint-wordmark%22%20x%3D%22559.19%22%20y%3D%22160.68%22%20width%3D%2277.54%22%20height%3D%22321.88%22%2F%3E%20%3Cpath%20class%3D%22mint-wordmark%22%20d%3D%22M699.97%2C315.11c0-107.51%2C63.86-162.9%2C158.99-162.9s158.99%2C54.73%2C158.99%2C162.9v167.46h-77.54v-167.46c0-61.25-32.58-90.57-81.45-90.57s-81.45%2C29.32-81.45%2C90.57v167.46h-77.54v-167.46Z%22%2F%3E%20%3Cpath%20class%3D%22mint-wordmark%22%20d%3D%22M1157.66%2C231.04v119.23c0%2C43.01%2C22.17%2C59.97%2C54.09%2C59.97h81.14v72.32h-81.14c-78.2%2C0-131.62-43.01-131.62-132.29V46.66h77.53v114.03h135.23v70.35h-135.23Z%22%2F%3E%20%3Cpath%20class%3D%22mint-leaf%22%20d%3D%22M636.73%2C105.38c0%2C3.32-.16%2C6.48-.47%2C9.64-5.06.95-10.27%2C1.26-15.48%2C1.26-58.3%2C0-105.54-47.24-105.54-105.38%2C0-3.32.16-6.48.47-9.64%2C5.06-.79%2C10.27-1.26%2C15.64-1.26%2C58.14%2C0%2C105.38%2C47.24%2C105.38%2C105.38Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E")) no-repeat var(--cs-header-logo-pos, 24px center) / var(--cs-header-logo-size, auto 30px);
    border-bottom: 1px solid var(--cs-slate-100);
    z-index: 97;
    pointer-events: none;
  }
}

/* Page switches feel like one app: no slide-up entrance, and Mint's loading veil is the canvas colour,
   quick, and never blurs or covers the header and rail. */
html:root body :is(.main, main.main, .content, .main-content) { animation: none !important; }
html:root body .page-loader {
  background: var(--cs-gray-100) !important;
  backdrop-filter: none !important;
  transition: opacity 120ms ease, visibility 120ms ease !important;
}

/* Header search reads at full contrast. */
html:root body .navbar-search-trigger, html:root body .navbar-search-trigger * { color: var(--cs-gray-500) !important; }
html:root body .navbar-search-trigger kbd, html:root body .navbar-search-trigger [class*="kbd"], html:root body .navbar-search-trigger [class*="shortcut"] { font-size: 11px !important; }

/* Controls Mint paints with strong rules of its own (found by the redesign's layout audit). */
html:root body button.btn-enroll.btn-enroll,
html:root body button.empty-state-btn.empty-state-btn {
  background: var(--cs-primary) !important;
  background-image: none !important;
  border: 1px solid var(--cs-primary) !important;
  color: #fff !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}
html:root body button.btn-enroll.btn-enroll { height: 36px !important; min-height: 36px !important; padding: 0 14px !important; }
html:root body button.empty-state-btn.empty-state-btn { height: 44px !important; padding: 0 18px !important; }
html:root body :is(button.btn-enroll, button.empty-state-btn):hover { background: var(--cs-primary-hover) !important; border-color: var(--cs-primary-hover) !important; }
html:root body button.mint-icon-btn.mint-icon-btn { min-width: 36px !important; min-height: 36px !important; }
html:root body thead button.col-filter-btn.col-filter-btn { min-height: 36px !important; display: inline-flex !important; align-items: center !important; }
html:root body button.aca-quick-btn.aca-quick-btn { min-height: 44px !important; }
html:root body .plans-tab.plans-tab { min-height: 44px !important; }

/* Readable secondary text: Mint's faint gray (#9ca3af, about 2.5:1) and sub-12px labels, found by the redesign's layout audit. */
html:root body :is(.company-stat-label, .cobra-stat-label, .cobra-stat-sub, .cobra-empty-sub, .aca-metric-label, .aca-ring-sub,
  .url-text, .company-slug, .upload-zone-hint, .nh-subtitle, .portal-share-hint, .delete-company-link, .settings-section-desc,
  .empty-state p, .empty-state-text, .page-subtitle, .section-subtitle, .card-subtitle, .stat-sub, .stat-label) {
  color: var(--cs-gray-500) !important;
}
html:root body :is(.company-stat-label, .cobra-stat-label, .aca-metric-label, .aca-ring-sub, .settings-section-desc, .wl-label,
  .dns-step, .dns-num, .slug-prefix, .media-label, .color-label, .profile-badge, .docs-section-count, .aca-missing-count, .aca-mtag,
  .portal-share-title, .portal-share-hint, .auto-label, .company-status, .pill, .em-stat-label, .delete-company-link) {
  font-size: 12px !important;
}
html:root body .navbar-search-trigger kbd { font-size: 11px !important; }
html:root body #tab-employees button.mint-icon-btn.mint-icon-btn { min-width: 36px !important; min-height: 36px !important; height: 36px !important; width: 36px !important; }
html:root body #tab-settings :is(label, .checkbox-label, .dns-step, .dns-num, .dns-ip) { font-size: 12px !important; }

/* Mint sizes these labels in rem and drops its root font from 15px (1440) to 14px at 1200px and below, so on
   laptops, tablets and phones they fall under 12px. Each max() keeps Mint's 1440 size and floors it at 12px. */
html:root body :is(.enrollment-card .days-badge, .status-item .status-label, .upload-zone-hint,
  .sidebar-header .sidebar-subtitle, main.settings-main .form-group > .form-label, .plan-provider, .stat-card .stat-label, .company-info > div > .company-meta,
  .cobra-section-title) { font-size: max(12px, 0.85rem) !important; }
html:root body .slug-display-wrap .onboard-link { font-size: max(12px, 0.9rem) !important; }
html:root body :is(.onboard-actions .action-link, .onboard-actions .action-link span, .sent-history-wrap .action-link, .text-drop-meta span, .faq-a-inner code, .cobra-stat-sub, .nh-subtitle) { font-size: max(12px, 0.8rem) !important; }
html:root body .switcher-info .switcher-label { font-size: max(12px, 0.8125rem) !important; }
html:root body :is(button.btn-enroll, .cobra-empty-sub, .report-type-desc) { font-size: max(12px, 0.82rem) !important; }
html:root body :is(.faq-a-inner, .faq-a-inner strong) { font-size: max(12px, 0.825rem) !important; }
html:root body .media-actions .btn-sm { font-size: max(12px, 0.84rem) !important; }
html:root body #tab-documents label[style*="1f8f88"] { font-size: max(12px, 0.85rem) !important; background: var(--cs-primary) !important; }
@media (max-width: 768px) {
  html:root body :is(main, .main) table:not(.cs-keep) th, html:root body :is(main, .main) table:not(.cs-keep) th .col-filter-btn, html:root body :is(main, .main) table:has(.radial-progress) td { font-size: max(12px, 0.875rem) !important; }
}
/* Faint or light-teal text Mint paints under 4.5:1: "Not set" dates, ACA card details, plan names, the DNS address. */
html:root body .enrollment-dates span[style*="9ca3af"], html:root body #tab-aca .aca-check-card.complete .aca-check-detail { color: var(--text-muted) !important; }
html:root body .aca-check-detail .val[style*="d97706"] { color: #b45309 !important; }
html:root body :is(.plan-name-text, .dns-ip) { color: var(--cs-primary) !important; }
html:root body .help-card :is(p, .help-card-desc, .card-desc) { font-size: 13px !important; color: var(--cs-gray-500) !important; }
html:root body :is(.filter-tab, .tab) :is(.count, .tab-count, .badge) { color: var(--cs-gray-700) !important; }

/* Page switch curtain (see mint-ui.js): the header bar and rail are painted from the first frame and the
   rail is mounted straight away; the rest of the page appears once, together, instead of in pieces. */
html:root.cs-early:not(.cs-ready) body > :not(script):not(style):not(link):not(#cs-rail):not(#ui) { opacity: 0 !important; }
html:root.cs-revealing body > :not(#cs-rail):not(#ui) { transition: opacity 160ms ease-out !important; }

/* ---------- Main tabs read as tabs (Mint's folder tabs, in the new palette) ----------
   Original Mint draws the active main tab as a raised card that opens into the page below. The new look
   keeps that: tabs sit on the header's bottom rule, the active one is a bordered card in the page colour
   that covers the rule, and every tab shows a hover state. Applies to the company record, employee record,
   Library and the Emails page. */
html:root body :is(.company-header, .employee-header, .main > .page-header:has(.tabs), body.em-standalone #subtabBar) {
  border-bottom: 1px solid var(--cs-border) !important;
}
html:root body :is(.company-tabs.company-tabs, .main-tabs.main-tabs, .page-header .tabs.tabs) {
  gap: 2px !important;
  margin-bottom: -1px !important;
  overflow-y: visible !important;
  align-items: flex-end !important;
}
html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab), html:root:not([data-cs-embed]) body.em-standalone .docs-subtab.docs-subtab.docs-subtab {
  height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab):not(.active):hover, html:root:not([data-cs-embed]) body.em-standalone .docs-subtab.docs-subtab.docs-subtab:not(.active):hover {
  background: var(--cs-gray-50) !important;
  background-color: var(--cs-gray-50) !important;
  color: var(--cs-primary) !important;
}
html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab).active, html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab).active:hover, html:root:not([data-cs-embed]) body.em-standalone .docs-subtab.docs-subtab.docs-subtab.active {
  background: var(--cs-gray-100) !important;
  background-color: var(--cs-gray-100) !important;
  border-color: var(--cs-border) !important;
  box-shadow: 0 1px 0 var(--cs-gray-100) !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 600 !important;
  position: static !important;
}
/* Mint's own glide indicator and underline pseudo-elements would draw a second marker. */
html:root body :is(.company-tabs, .main-tabs, .page-header .tabs) > :is(.company-tab, .main-tab, .tab)::after, html:root body :is(.company-tabs, .main-tabs, .page-header .tabs) > :is(.company-tab, .main-tab, .tab)::before, html:root body :is(.company-tabs, .main-tabs, .page-header .tabs) > :is(.mint-tab-indicator, .tab-indicator, .glide-indicator) { display: none !important; }

/* Custom dropdowns size to their label (the new chevron padding cut "2027 Plans" short). */
html:root body .cdrop:has(> .cdrop-trigger) { width: auto !important; min-width: 120px !important; }
html:root body .cdrop > .cdrop-trigger { width: auto !important; min-width: 120px !important; white-space: nowrap !important; }
/* Narrower desktops: the 13 company tabs still fit on one row. */
@media (max-width: 1439px) {
  html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab) { padding: 0 10px !important; font-size: 14px !important; }
}
@media (max-width: 1199px) {
  html:root body :is(.company-tabs.company-tabs > .company-tab, .main-tabs.main-tabs > .main-tab, .page-header .tabs.tabs > .tab.tab) { padding: 0 6px !important; font-size: 13px !important; }
}

/* ---------- Mint segmented control: one look for every second-level tab row ----------
   Level 1 (sections of a page) stays Mint's folder tab. Level 2 (views inside a section, and list filters
   such as All / Active / Upcoming) is a segmented control: a soft teal-gray track with the current view
   raised in white. One component everywhere: company Benefits and Documents, the employee record's
   sub-tabs, the company Emails tab, Plans, Enrollments and Text Drops. */
html:root body :is(.filter-tabs.filter-tabs, .plans-tabs.plans-tabs, .benefits-subtab-bar-inner.benefits-subtab-bar-inner, .subtab-bar-inner.subtab-bar-inner), html:root body #tab-documents .docs-subtab-bar-inner.docs-subtab-bar-inner, html:root[data-cs-embed] body.em-standalone #subtabInner > .docs-subtab-track.docs-subtab-track {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 2px !important;
  padding: 4px !important;
  margin: 0 !important;
  background: var(--cs-seg-track) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}
html:root body :is(.filter-tabs.filter-tabs > .filter-tab, .plans-tabs.plans-tabs > .plans-tab, .benefits-subtab-bar-inner > .benefits-subtab.benefits-subtab.benefits-subtab, .subtab-bar-inner > .subtab.subtab.subtab), html:root body #tab-documents .docs-subtab-bar-inner .docs-subtab.docs-subtab.docs-subtab:is(.active, :not(.active)), html:root[data-cs-embed] body.em-standalone .docs-subtab-track .docs-subtab.docs-subtab.docs-subtab {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
html:root body :is(.filter-tabs.filter-tabs > .filter-tab, .plans-tabs.plans-tabs > .plans-tab, .benefits-subtab-bar-inner > .benefits-subtab.benefits-subtab.benefits-subtab, .subtab-bar-inner > .subtab.subtab.subtab):not(.active):hover, html:root body #tab-documents .docs-subtab-bar-inner .docs-subtab.docs-subtab.docs-subtab:not(.active):hover, html:root[data-cs-embed] body.em-standalone .docs-subtab-track .docs-subtab.docs-subtab.docs-subtab:not(.active):hover {
  background: var(--cs-seg-hover) !important;
  color: var(--cs-primary-deep) !important;
}
html:root body :is(.filter-tabs.filter-tabs > .filter-tab, .plans-tabs.plans-tabs > .plans-tab, .benefits-subtab-bar-inner > .benefits-subtab.benefits-subtab.benefits-subtab, .subtab-bar-inner > .subtab.subtab.subtab).active, html:root body #tab-documents .docs-subtab-bar-inner .docs-subtab.docs-subtab.docs-subtab.active, html:root[data-cs-embed] body.em-standalone .docs-subtab-track .docs-subtab.docs-subtab.docs-subtab.active {
  background: #fff !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 58, 52, 0.08), 0 0 0 1px rgba(0, 58, 52, 0.06) !important;
}
/* Icons take the label's colour; Mint's markers and glide indicators would be a second "you are here". */
html:root body :is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab) :is(i, svg) { color: currentColor !important; opacity: 0.85; }
html:root body :is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab):is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab):is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab)::before, html:root body :is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab):is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab):is(.filter-tab, .plans-tab, .benefits-subtab, .subtab, .docs-subtab)::after { display: none !important; content: none !important; }
html:root body :is(.filter-tabs, .plans-tabs, .benefits-subtab-bar-inner, .subtab-bar-inner, .docs-subtab-bar-inner, .docs-subtab-track) > :is(.mint-tab-indicator, .tab-indicator, .glide-indicator, [class*="indicator"]) { display: none !important; }
/* Counts inside a segment. */
html:root body :is(.filter-tab, .plans-tab) :is(.count, .tab-count, .badge) {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(0, 58, 52, 0.08) !important;
  color: var(--cs-gray-700) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html:root body :is(.filter-tab, .plans-tab).active :is(.count, .tab-count, .badge) { background: var(--cs-primary-tint) !important; color: var(--cs-primary-deep) !important; }

/* The rows that hold a segmented control: no strip, no rule, one spacing. */
html:root body :is(.benefits-subtab-bar, .subtab-bar, #tab-documents .docs-subtab-bar):not(#subtabBar) {
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  left: 0 !important;
  transform: none !important;
}
html:root[data-cs-embed] body { background: transparent !important; }

/* Label + select filters (e.g. "Status | Active") are one control: label inside, divider, borderless select. */
html:root body .filter-group.filter-group {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  overflow: hidden !important;
}
html:root body .filter-group.filter-group:focus-within { border-color: var(--cs-primary) !important; box-shadow: 0 0 0 3px var(--cs-ring) !important; }
html:root body .filter-group.filter-group > .filter-label {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background: var(--cs-gray-50) !important;
  border: 0 !important;
  border-right: 1px solid var(--cs-border) !important;
  border-radius: 0 !important;
  color: var(--cs-gray-500) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html:root body .filter-group.filter-group :is(.cdrop, .cdrop-trigger, select) {
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
html:root body .filter-group.filter-group .cdrop { display: inline-flex !important; align-items: stretch !important; }

/* ---------- Company record: tab content (Profile, Onboarding, Settings) ---------- */

/* One card-title style on every record card: sentence case, 15px, not a small-caps label. */
html:root body :is(.profile-section-title, .settings-section-title) {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--cs-fg) !important;
}
html:root body :is(.profile-section-subtitle, .settings-section-desc, .settings-section-subtitle) { font-size: 13px !important; color: var(--cs-gray-500) !important; }
/* Cards in a grid share one width. */
html:root body .profile-section.signature-section { max-width: none !important; width: auto !important; }
/* Settings uses the full content width, like every other tab. */
html:root body #tab-settings .settings-grid { max-width: none !important; width: 100% !important; }
html:root body #tab-settings .settings-grid input[type="text"] { min-width: 0 !important; }
html:root body #tab-settings :is(#portalSlugInput, .slug-input, input[id*="lug"]) { min-width: 220px !important; height: 44px !important; }
/* "Send Onboarding" is a secondary action, painted like every other secondary button. */
html:root body button.send-onboarding-btn.send-onboarding-btn {
  background: var(--cs-outline) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-primary) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  min-height: 36px !important;
}
/* Decision-maker cards sit inside their section with even margins. */
html:root body .dm-card.dm-card { box-sizing: border-box !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
html:root body :has(> .dm-card.dm-card) { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }
/* New Hires: Set Up Flow is secondary; Invite Employee stays the page's primary action. */
html:root body button.nh-configure-btn.nh-configure-btn { background: var(--cs-outline) !important; border: 1px solid var(--cs-border) !important; color: var(--cs-primary) !important; border-radius: var(--cs-radius-md) !important; box-shadow: var(--cs-shadow-xs) !important; }

/* ---------- Employee record: tab content ---------- */

/* Per-dependent switcher (Isaac G. / Tessa G.) is a view switcher, so it is the segmented control too. */
html:root body .dep-tabs.dep-tabs {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 2px !important;
  padding: 4px !important;
  margin: 0 0 12px !important;
  background: var(--cs-seg-track) !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
}
html:root body .dep-tabs.dep-tabs > .dep-tab.dep-tab {
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html:root body .dep-tabs.dep-tabs > .dep-tab.dep-tab:not(.active):hover { background: var(--cs-seg-hover) !important; color: var(--cs-primary-deep) !important; }
html:root body .dep-tabs.dep-tabs > .dep-tab.dep-tab.active { background: #fff !important; color: var(--cs-primary-deep) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0, 58, 52, 0.08), 0 0 0 1px rgba(0, 58, 52, 0.06) !important; }
html:root body .dep-tabs.dep-tabs > .dep-tab.dep-tab::after { display: none !important; content: none !important; }
html:root body .dep-form-card.dep-form-card { position: relative !important; border-radius: var(--cs-radius-xl) !important; }
/* Mint draws the remove control over the first section title; it becomes a labelled icon button in the corner. */
html:root body .dep-form-card > button.dep-remove-btn.dep-remove-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--cs-radius-md) !important;
  background: #fff !important;
  color: #dc2626 !important;
  font-size: 18px !important;
  z-index: 2 !important;
}
html:root body .dep-form-card > button.dep-remove-btn.dep-remove-btn:hover { background: #fef2f2 !important; }
/* Benefit cards: the coverage type reads as a title. */
html:root body .benefit-card-title { text-transform: capitalize !important; font-weight: 600 !important; }

/* ---------- View switches (List / Grid, List / Calendar) use the segmented control ----------
   Mint keeps other actions (Add Company) inside .view-toggle, so only the view buttons are drawn as segments:
   the track is each segment's own background plus a 4px ring in the track colour, which joins neighbours. */
html:root body .view-toggle.view-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 4px !important; gap: 0 !important; align-items: center !important; }
html:root body .view-toggle.view-toggle > .view-btn + :not(.view-btn) { margin-left: 16px !important; }
html:root body .em-view-toggle.em-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
  height: 44px !important;
  box-sizing: border-box !important;
  background: var(--cs-seg-track) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html:root body :is(.view-toggle.view-toggle > button.view-btn, .em-view-toggle.em-view-toggle > button) {
  height: 36px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html:root body .view-toggle.view-toggle > button.view-btn { background: var(--cs-seg-track) !important; box-shadow: 0 0 0 4px var(--cs-seg-track) !important; border-radius: 9px !important; }
html:root body :is(.view-toggle.view-toggle > button.view-btn, .em-view-toggle.em-view-toggle > button):is(.active, .is-active, .on, [aria-pressed="true"], [aria-selected="true"]) {
  background: #fff !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 600 !important;
}
html:root body .em-view-toggle.em-view-toggle > button:is(.active, .is-active, .on, [aria-pressed="true"], [aria-selected="true"]) { box-shadow: 0 1px 2px rgba(0, 58, 52, 0.08), 0 0 0 1px rgba(0, 58, 52, 0.06) !important; }
html:root body .view-toggle.view-toggle > button.view-btn:is(.active, .is-active, .on, [aria-pressed="true"]) { box-shadow: 0 0 0 4px var(--cs-seg-track), 0 1px 2px 4px rgba(0, 58, 52, 0.04) !important; }
html:root body :is(.view-toggle.view-toggle > button.view-btn, .em-view-toggle.em-view-toggle > button):not(:is(.active, .is-active, .on, [aria-pressed="true"], [aria-selected="true"])):hover { color: var(--cs-primary-deep) !important; }

/* ---------- Library ---------- */

/* Library's search starts collapsed to an icon in Mint; every other page shows the field, so it is always open here. */
html:root body .search-box:has(> button.search-icon) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 280px !important;
  height: 44px !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-xs) !important;
  overflow: hidden !important;
}
html:root body .search-box:has(> button.search-icon):focus-within { border-color: var(--cs-primary) !important; box-shadow: 0 0 0 3px var(--cs-ring) !important; }
html:root body .search-box > button.search-icon.search-icon {
  position: static !important;
  flex: none !important;
  width: 40px !important;
  height: 42px !important;
  min-height: 0 !important;
  padding: 0 0 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
}
html:root body .search-box:has(> button.search-icon) > input {
  position: static !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 12px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Filter chips (many options, wrap to a second row): one look for Forms Library categories and Email template types. */
html:root body :is(.category-pill.category-pill, .em-chip.em-chip) {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html:root body :is(.category-pill.category-pill, .em-chip.em-chip):not(.active):hover { border-color: var(--cs-primary-lighter) !important; color: var(--cs-primary-deep) !important; }
html:root body :is(.category-pill.category-pill, .em-chip.em-chip).active { background: var(--cs-primary-tint) !important; border-color: var(--cs-primary-lighter) !important; color: var(--cs-primary-deep) !important; font-weight: 600 !important; }
html:root body .em-chip .em-chip-count { color: var(--cs-gray-500) !important; font-size: 12px !important; }
html:root body .marketplace-search { height: 44px !important; box-sizing: border-box !important; }
html:root body .marketplace-search ~ select, html:root body :has(> .marketplace-search) select { height: 44px !important; }

/* ---------- Dialogs ---------- */
/* Plan Library's Templates / Blocks switch is a view switch: the segmented control. */
html:root body .plan-library-tabs.plan-library-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px !important;
  background: var(--cs-seg-track) !important;
  border: 0 !important;
  border-radius: 12px !important;
}
html:root body .plan-library-tabs.plan-library-tabs > .plan-library-tab {
  height: 36px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html:root body .plan-library-tabs.plan-library-tabs > .plan-library-tab.active { background: #fff !important; color: var(--cs-primary-deep) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0, 58, 52, 0.08), 0 0 0 1px rgba(0, 58, 52, 0.06) !important; }
html:root body .plan-library-tabs.plan-library-tabs > .plan-library-tab:not(.active):hover { background: var(--cs-seg-hover) !important; color: var(--cs-primary-deep) !important; }
/* Every dialog close control is a 36px target. */
html:root body :is(.modal, .modal-content, [class*="modal"]) :is(.modal-close, .close-btn, .modal-close-btn, button[aria-label="Close"], button[aria-label="close"]) {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--cs-radius-md) !important;
}

/* ---------- Table controls ---------- */
/* "Sort, filter & select" was a folder-tab shape glued to the table, which read as another tab level.
   It becomes a small secondary button in a toolbar strip at the top of the table card. */
html:root body .table-container > button.mint-record-filters.btn {
  margin: 12px 16px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--cs-shadow-xs) !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html:root body .table-container > button.mint-record-filters.btn:hover { border-color: var(--cs-primary-lighter) !important; color: var(--cs-primary-deep) !important; }
html:root body .table-container > button.mint-record-filters.btn::before,
html:root body .table-container > button.mint-record-filters.btn::after { display: none !important; content: none !important; }
/* Column filter popover: a real Apply button. */
html:root body .col-filter-dropdown .col-filter-apply.col-filter-apply {
  width: calc(100% - 16px) !important;
  height: 36px !important;
  margin: 8px !important;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: var(--cs-primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root body .col-filter-dropdown .col-filter-apply.col-filter-apply:hover { background: var(--cs-primary-hover) !important; }
html:root body .col-filter-dropdown { border: 1px solid var(--cs-border) !important; border-radius: var(--cs-radius) !important; box-shadow: var(--cs-shadow-lg) !important; }

/* Enrollment progress rings: readable percentages. Mint's SVG has no viewBox, so scale it rather than resize it. */
html:root body .radial-progress.radial-progress { width: 48px !important; height: 48px !important; display: grid !important; place-items: center !important; }
html:root body .radial-progress.radial-progress > svg { transform: scale(1.2); transform-origin: center; }
html:root body .radial-progress .radial-progress-text { font-size: 12px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--cs-fg) !important; }

/* Phone pass (broker pages). */
@media (max-width: 480px) {
  /* Dashboard enrollment cards: the "days left" tab hangs from the top edge; start the content below it. */
  html:root body .enrollment-card { padding-top: 48px !important; }
  /* Segmented filters fit four options on a 390px phone instead of hiding the last one off the edge (narrower phones scroll). */
  html:root body :is(.filter-tabs.filter-tabs > .filter-tab, .plans-tabs.plans-tabs > .plans-tab, .benefits-subtab-bar-inner > .benefits-subtab.benefits-subtab.benefits-subtab, .subtab-bar-inner > .subtab.subtab.subtab) { padding-left: 8px !important; padding-right: 8px !important; gap: 4px !important; font-size: 13px !important; }
  html:root body .filter-tabs.filter-tabs > .filter-tab > .count { margin-left: 0 !important; }
  html:root body .filter-tabs.filter-tabs { gap: 0 !important; }
}

/* Employees table actions: the email, life-event and enrollment controls always sit in the same three slots
   (email is left empty when there is nothing to send), so the column lines up from row to row. */
html:root body #tab-employees td > div:has(> .mint-icon-btn[onclick*="openQleModal"]) {
  display: grid !important;
  grid-template-columns: 36px 36px 116px;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}
html:root body #tab-employees td > div > .mint-icon-btn[onclick*="sendEnrollmentEmail"] { grid-column: 1; }
html:root body #tab-employees td > div > .mint-icon-btn[onclick*="openQleModal"] { grid-column: 2; }
html:root body #tab-employees td > div:has(> .mint-icon-btn[onclick*="openQleModal"]) > :last-child { grid-column: 3; width: 100% !important; }
html:root body #tab-employees td > div > div > button.btn-enroll.btn-enroll,
html:root body #tab-employees td > div > button.btn-enrollment-completed { width: 100% !important; justify-content: center !important; }

/* Tablet pass (broker pages, 600-900px). */
@media (min-width: 600px) and (max-width: 768px) {
  /* Dashboard company cards: two per row instead of one card the full width of a tablet. */
  html:root body .companies-grid.companies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  /* Enrollments toolbar: search gets its own full-width row instead of being squeezed beside the filters. */
  html:root body .controls:has(.filter-tabs) > .search-box { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
  html:root body .controls:has(.filter-tabs) > .search-box input { width: 100% !important; }
}

/* Readable text: 12px minimum, 4.5:1 contrast on white. */
html:root body :is(.text-drop-badge, .topic-card p, .plan-status, .location-copy-btn, .location-meta-item, .aca-missing-count, .aca-mtag, .payroll-tax-option small, .bg-preview span) { font-size: 12px !important; }
html:root body .dns-guide.dns-guide, html:root body .dns-guide.dns-guide :is(div, span, strong) { font-size: 12px !important; }
html:root body .bg-preview + div span, html:root body .bg-preview ~ * span { font-size: 12px !important; }
html:root body :is(.location-meta-item, .bg-preview span) { color: var(--text-muted) !important; }
html:root body .bg-preview ~ * span { color: var(--text-muted) !important; }
/* Green status text (employee Completed, plan Active) was Tailwind green-500/600: under 3:1 on white. */
html:root body :is(.btn-enrollment-completed:not(.is-waived), .btn-enrollment-completed:not(.is-waived) .completed-text, .plan-status.active) { color: var(--cs-success-fg) !important; }

/* Click targets: 36px minimum for small controls, 44px for inputs. */
html:root body .filter-bar > input#searchInput { height: 44px !important; min-height: 44px !important; }
html:root body :is(button.location-action-btn, button.location-copy-btn) { min-height: 36px !important; }
html:root body button.location-action-btn { min-width: 36px !important; }
html:root body button.location-copy-btn { display: inline-flex !important; align-items: center !important; }
html:root body .color-picker-wrap > input[type="color"] { width: 36px !important; height: 36px !important; }
html:root body .color-preview-bar > div { font-size: 12px !important; }

/* One button shape: every button uses the 8px radius (segmented-control segments keep theirs), icon buttons are
   white with a border, and dialog close buttons are 36px squares. */
html:root body :is(button.share-mini-btn.share-mini-btn, button.btn-icon-danger.btn-icon-danger, button.btn-secondary.btn-sm.btn-sm, .controls > button.btn-primary.btn-primary, button.btn-upload.btn-upload, button.btn-back.btn-back, .generate-modal-footer > button.btn-secondary, .generate-modal-footer > button.btn-primary, .preview-actions > button.btn-secondary, .preview-actions > button.btn-primary, button.confirm-modal-confirm.confirm-modal-confirm, button.confirm-modal-cancel.confirm-modal-cancel, button.preview-nav-btn.preview-nav-btn) {
  border-radius: var(--cs-radius-md) !important;
}
html:root body button.share-mini-btn.share-mini-btn { background: #fff !important; border: 1px solid var(--cs-border) !important; }
html:root body button.share-mini-btn.share-mini-btn:hover { background: var(--cs-gray-50) !important; }
html:root body :is(button.share-modal-close.share-modal-close, button.preview-modal-close.preview-modal-close, button.nh-panel-close.nh-panel-close) {
  width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
  border-radius: var(--cs-radius-md) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html:root body button.preview-nav-btn.preview-nav-btn { min-width: 36px !important; min-height: 36px !important; }
/* Employees table: Enroll is a 36px row button like Completed and Waived, so every row is the same height. */
html:root body #tab-employees td > div > div:has(> button.btn-enroll) { display: flex !important; }
html:root body #tab-employees td > div > div > button.btn-enroll.btn-enroll { height: 36px !important; min-height: 36px !important; }

/* Secondary broker pages. */
/* Help: the four topic cards fill the row instead of leaving an empty fifth column. */
html:root body .topics-grid.topics-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }

/* Form hints Mint paints inline in light gray (#9ca3af, 2.5:1), such as "(max 50 characters)": readable gray. */
html:root body :is(label, .form-label, .form-group, .form-hint) span[style*="9ca3af"] { color: var(--text-muted) !important; }
/* The x that removes a broker from Add Company's broker picker: a 24px target, not 14px. */
html:root body .broker-tag > button.broker-tag-remove.broker-tag-remove {
  min-width: 24px !important; min-height: 24px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
/* Fields side by side in a form row line up: the stacked-field top margin only applies between rows. */
html:root body :is(.form-row, .form-row-2, .form-row-3, .form-grid) > .form-group + .form-group { margin-top: 0 !important; }

/* Custom dropdown option highlighted from the keyboard (mint-ui.js): same look as pointer hover. */
html:root body .cdrop-menu .cdrop-option.cs-kb-active { background: var(--cs-primary-tint) !important; color: var(--cs-primary-deep) !important; }

/* Header search (Ctrl+K). */
/* The query box is part of the panel: full height, no inset ring when focused (the panel is the focus). */
html:root body .navbar-search-dropdown input.navbar-search-input {
  height: 44px !important; padding: 0 2px !important; font-size: 15px !important;
  border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important;
}
/* Result names use the whole row; the quick actions overlay the right edge on hover or keyboard selection. */
html:root body .navbar-search-result { position: relative !important; }
html:root body .navbar-search-result > .navbar-search-result-actions {
  position: absolute !important; right: 10px; top: 50%; transform: translateY(-50%);
  padding-left: 16px; background: linear-gradient(90deg, transparent, var(--cs-gray-50) 16px) !important;
  visibility: hidden;
}
html:root body .navbar-search-result:is(:hover, .selected) > .navbar-search-result-actions { visibility: visible; opacity: 1 !important; }
html:root body .navbar-search-result.selected, html:root body .navbar-search-result:hover { background: var(--cs-gray-50) !important; }
/* Phone user menu: Mint makes it position:fixed but keeps top:calc(100% + 8px), which is the screen height,
   so it opened just below the bottom of the screen. Open it under the header instead. */
@media (max-width: 768px) {
  html:root body .navbar-dropdown .navbar-dropdown-menu { top: calc(var(--cs-header-h, 72px) + 4px) !important; bottom: auto !important; }
}

/* Back to top sat under the chat button (desktop) and under the workspace More button (phone company record),
   in both looks. Lift it just above whichever is there. */
@media (min-width: 769px) {
  html:root body:has(#chatAiBtn) .mint-totop { bottom: 96px !important; }
}
@media (max-width: 768px) {
  html:root body:has(nav#mintWorkspaceNav > button):not(:has(#chatAiBtn)) .mint-totop { bottom: 72px !important; }
}

/* ---------- Desktop polish from the 2026-10-29 bug hunt ---------- */

/* Mint's moulded buttons (mint-buttons-v1.css) add a darker ring and a glow that the flat primary look does not have.
   Only the ring, glow and gradient go: each button keeps its own fill, so Cancel and danger variants stay as they are. */
html:root body :is(.btn-send, .btn-add, .btn-confirm, .btn-success, .btn-connect, .btn-generate, .btn-save-slug, .btn-upload, .controls-add, .confirm-btn, .upload-btn, .fix-issues-btn, .empty-state-btn, .send-email-submit, .modal-btn-save, .confirm-modal-confirm, .btn-brand, .election-add-btn, .nh-trigger-btn):not(:disabled):not([aria-disabled="true"]), html:root body :is(.btn-send, .btn-add, .btn-confirm, .btn-success, .btn-connect, .btn-generate, .btn-save-slug, .btn-upload, .controls-add, .confirm-btn, .upload-btn, .fix-issues-btn, .empty-state-btn, .send-email-submit, .modal-btn-save, .confirm-modal-confirm, .btn-brand, .election-add-btn, .nh-trigger-btn):not(:disabled):not([aria-disabled="true"]):hover { background-image: none !important; box-shadow: var(--cs-shadow-xs) !important; }
/* Icons inside filled buttons take the label colour (Mint paints the empty-state "+" teal on teal). */
html:root body :is(.btn-primary, .empty-state-btn, .controls-add, .upload-btn, .nh-trigger-btn) :is(i, svg) { color: inherit !important; }

/* Settings nav: only the current page is teal. */
html:root body .sidebar-nav-link.sidebar-nav-link:not(.active) { color: var(--cs-gray-700) !important; }
html:root body .sidebar-nav-link.sidebar-nav-link:not(.active):hover { color: var(--cs-primary) !important; }

/* Census Import: the step bar already sits under the header, so the page does not add the header gap again. */
html:root.cs-shell body .progress-bar + div.main { margin-top: 0 !important; }

/* Dashboard section links share one size. */
html:root body .section-header > a { font-size: 14px !important; }

/* New COBRA Event: the two-column grid starts both fields on the same line. */
html:root body .cobra-form-grid > .form-group { margin-top: 0 !important; }

/* Stat labels and section titles in sentence case, like the rest of the new look. */
html:root body :is(#tab-cobra, #tab-aca) :is(.cobra-stat-label, .cobra-section-title, .aca-metric-label) { text-transform: none !important; letter-spacing: 0 !important; }

/* Emails: template rows are rows inside the library card, not cards of their own. */
html:root body .em-tpl-card.em-tpl-card { border: 0 !important; box-shadow: none !important; }

/* Emails tables on narrower desktops: Mint's 14px cell padding, so names and addresses stay on one line. */
@media (max-width: 1439px) {
  html:root body main table.em-table:not(.cs-keep) :is(thead th, tbody td) { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Embedded Emails (company record) is sized to its content, so it needs no scrollbar gutter. */
html:root[data-cs-embed] { scrollbar-gutter: auto !important; }

/* ==========================================================================
   Folded from Codex's lane files 30 to 49 (rounds one to three), in their original order, so the cascade is
   unchanged. Each block names the file it came from. Codex's current dialog files (50 to 52) stay separate.
   ========================================================================== */

/* ---------- From 30-codex.css ---------- */
/* Keep Codex overrides in 31-36 so parallel work does not collide with core or John's areas. */

/* ---------- From 31-codex-phone.css ---------- */
/* Keep record actions and dependent fields reachable on narrow screens. */
@media (max-width: 768px) {
  html:root body[data-broker-page] #benefits-open-enrollment #oe-container > div:first-child,
  html:root body[data-broker-page] #tab-documents .docs-section-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  html:root body[data-broker-page] #benefits-open-enrollment #oe-container > div:first-child > div {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  html:root body[data-broker-page] #oe-create-form > div[style*="grid"],
  html:root body[data-broker-page] #tab-people .dep-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root body[data-broker-page] #oe-create-form input.form-input {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root body[data-broker-page] #tab-documents .docs-section-header > .docs-section-title {
    flex: 1 0 100% !important;
  }

  html:root body[data-broker-page] #tab-documents .docs-section-header > div:not(.docs-section-title) {
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root body[data-broker-page] #company-docs .docs-section-header > div > div:has(> #searchCompanyDocs) {
    flex: 1 0 100% !important;
    max-width: none !important;
  }

  html:root body[data-broker-page] #tab-settings .slug-input-row {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  html:root body[data-broker-page] #tab-settings .slug-input-row #companySlugInput,
  html:root body[data-broker-page] #tab-settings .slug-input-row #companySubdomainInput,
  html:root body[data-broker-page] #tab-settings .slug-input-row #companyCustomDomainInput {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html:root body[data-broker-page] #tab-settings .slug-input-row .slug-copy-btn,
  html:root body[data-broker-page] #tab-settings .slug-input-row .slug-save-btn {
    flex-shrink: 0 !important;
  }

  html:root body[data-broker-page] #tab-people .dep-form-group,
  html:root body[data-broker-page] #tab-people .dp-input-wrap {
    min-width: 0 !important;
  }

  html:root body[data-broker-page] #tab-people .dep-form-input,
  html:root body[data-broker-page] #tab-people .dep-form-select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ---------- From 32-codex-focus.css ---------- */
/* Restore Library focus and ring the whole custom filter, including its native Tab stop. */
html:root body[data-broker-page] #filterFormType:focus-visible,
html:root body[data-broker-page] #filterFormStatus:focus-visible,
html:root body[data-broker-page] .filter-group.filter-group:has(.cdrop :focus-visible) {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* A copy button that is only revealed on hover otherwise stays invisible on Tab. */
html:root body[data-broker-page] .url-copy-btn:focus-visible {
  opacity: 1 !important;
  color: var(--cs-primary-deep) !important;
}

/* ---------- From 33-codex-states.css ---------- */
/* Keep existing helper text readable on the clone canvas. */
html:root body[data-broker-page] .nh-empty-state > p + p,
html:root body[data-broker-page] .docs-upload-cta > small {
  color: var(--cs-gray-700) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* App.toast injects its own late stylesheet; keep its markup in the clone system. */
html:root body[data-broker-page] .toast-container > .toast,
html:root body[data-broker-page] #toast.toast {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: var(--cs-shadow-md) !important;
  overflow-wrap: anywhere;
}

/* Record pages also define .toast as a fixed, centered notice. App's stack owns placement. */
html:root body[data-broker-page] .toast-container > .toast {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 24rem !important;
  min-width: 0 !important;
  background: var(--cs-gray-50) !important;
  color: var(--cs-gray-700) !important;
}
html:root body[data-broker-page] .toast-container .toast-message {
  min-width: 0;
}
html:root body[data-broker-page] .toast-container .toast-success .toast-icon {
  color: var(--cs-success-fg) !important;
}
html:root body[data-broker-page] .toast-container .toast-error .toast-icon {
  color: var(--cs-bad-fg) !important;
}
html:root body[data-broker-page] .toast-container .toast-info .toast-icon {
  color: var(--cs-primary-deep) !important;
}
html:root body[data-broker-page] .toast-container .toast-warning .toast-icon {
  color: var(--cs-warn-fg) !important;
}
html:root body[data-broker-page] #toast.toast.success {
  background: var(--cs-ok-bg) !important;
  color: var(--cs-ok-fg) !important;
}
html:root body[data-broker-page] #toast.toast.error {
  background: var(--cs-bad-bg) !important;
  color: var(--cs-bad-fg) !important;
}
html:root body[data-broker-page] #toast.toast.info {
  background: var(--cs-outline) !important;
  color: var(--cs-primary-deep) !important;
}

@media (max-width: 768px) {
  html:root body[data-broker-page] .toast-container {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html:root body[data-broker-page] .toast-container > .toast {
    max-width: none !important;
  }
  html:root body[data-broker-page] #toast.toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
  }
}

/* ---------- From 34-codex-tables.css ---------- */
/* Align desktop numbers with their headings without changing phone cards. */
@media (min-width: 769px) {
  html:root body[data-broker-page] #companiesTable table th:nth-child(2),
  html:root body[data-broker-page] #companiesTable table td:nth-child(2),
  html:root body[data-broker-page] #formsListView table th:nth-child(4),
  html:root body[data-broker-page] #formsListView table td:nth-child(4),
  html:root body[data-broker-page] #draftsListView table th:nth-child(4),
  html:root body[data-broker-page] #draftsListView table td:nth-child(4),
  html:root body[data-broker-page] #tab-jobclasses table th:nth-child(5),
  html:root body[data-broker-page] #tab-jobclasses table td:nth-child(5),
  html:root body[data-broker-page] #companiesTable .enrollment-pct {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }
  /* Fixed icon/count columns keep each icon aligned regardless of count length. */
  html:root body[data-broker-page] #companiesTable .emp-count-cell {
    display: grid !important;
    grid-template-columns: 16px 3ch;
    column-gap: 10px;
    justify-content: end !important;
    justify-items: end;
    align-items: center;
    font-variant-numeric: tabular-nums !important;
  }
  html:root body[data-broker-page] #companiesTable .emp-count-cell > .emp-count-icon { justify-self: center; margin-right: 0 !important; }
}
html:root body[data-broker-page] .pagination-bar {
  font-variant-numeric: tabular-nums;
}

/* ---------- From 35-codex-hover.css ---------- */
/* X5: clickable grid cards use colour feedback, without the old vertical lift. */
html:root body[data-broker-page] #companiesGrid .company-card,
html:root body[data-broker-page] #marketplaceGrid .template-card {
  transform: none !important;
  transition-property: background-color, border-color, box-shadow !important;
}

@media (hover: hover) {
  html:root body[data-broker-page] #companiesGrid .company-card:hover,
  html:root body[data-broker-page] #marketplaceGrid .template-card:hover {
    background-color: var(--cs-gray-50) !important;
    border-color: var(--cs-primary-light) !important;
    box-shadow: var(--cs-shadow-sm) !important;
  }
}

html:root body[data-broker-page] #companiesGrid .company-card:active,
html:root body[data-broker-page] #marketplaceGrid .template-card:active {
  background-color: var(--cs-primary-tint) !important;
  border-color: var(--cs-primary) !important;
  box-shadow: var(--cs-shadow-xs) !important;
}

/* ---------- From 36-codex-emails.css ---------- */
/* Keep send-day labels readable and centred despite Mint's phone padding. */
html:root body[data-broker-page].em-standalone #tab-settings .em-day,
html:root body[data-broker-page].em-standalone #tab-automations .em-day {
  font-size: 14px !important;
  border-radius: var(--cs-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 0 !important;
}
/* The clone main gutter is 24px; Mint's 48px footer bleed escapes the page. */
html:root:not([data-cs-embed]) body[data-broker-page].em-standalone .em-pageview-foot {
  margin-inline: -24px;
  padding-inline: 24px;
}

@media (max-width: 768px) {
  html:root:not([data-cs-embed]) body[data-broker-page].em-standalone .em-pageview-foot {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}

@media (max-width: 680px) {
  html:root body[data-broker-page].em-standalone #tab-automations .em-auto-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  html:root body[data-broker-page].em-standalone #tab-automations .em-auto-name {
    flex-wrap: wrap;
    row-gap: 6px;
    line-height: 1.5;
  }

  html:root body[data-broker-page].em-standalone #tab-automations .em-auto-side {
    justify-content: flex-end;
  }
}

@media (max-width: 1199px) {
  html:root body[data-broker-page] .mint-workspace-nav a,
  html:root body[data-broker-page] .mint-workspace-nav button {
    font-size: 12px;
  }
}

/* ---------- From 43-codex-company-grid.css ---------- */
/* X11: let Companies Grid tracks shrink to the available phone width. */
@media (max-width: 599px) {
  html:root body[data-broker-page] #companiesGrid.companies-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root body[data-broker-page] #companiesGrid > .company-card {
    min-width: 0;
  }

  html:root body[data-broker-page] #companiesGrid .card-company-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------- From 44-codex-status-palette.css ---------- */
/* X12: known broker statuses share the semantic palette already used by the
   company employee table. Color only; preserve each badge's existing geometry. */
html:root body[data-broker-page="dashboard"] .status-pill.completed,
html:root body[data-broker-page="enrollments"] .status-badge.active,
html:root body[data-broker-page="library"] .status-badge.mapped,
html:root body[data-broker-page="library"] .status-badge.signed,
html:root body[data-broker-page="library"] .status-badge.completed,
html:root body[data-broker-page="company"] .onboarding-status .status-badge.completed,
html:root body[data-broker-page="all-text-drops"] .text-drop-badge.sent {
  background: var(--cs-ok-bg) !important;
  color: var(--cs-ok-fg) !important;
}

html:root body[data-broker-page="dashboard"] .status-pill.in-progress,
html:root body[data-broker-page="library"] .status-badge.unmapped,
html:root body[data-broker-page="library"] .status-badge.pending,
html:root body[data-broker-page="plans"] .status-badge.pending,
html:root body[data-broker-page="company"] .onboarding-status .status-badge.pending,
html:root body[data-broker-page="all-text-drops"] .text-drop-badge.scheduled {
  background: var(--cs-warn-bg) !important;
  color: var(--cs-warn-fg) !important;
}

html:root body[data-broker-page="dashboard"] .status-pill.waived,
html:root body[data-broker-page="enrollments"] .status-badge.ended,
html:root body[data-broker-page="library"] .status-badge.draft,
html:root body[data-broker-page="library"] .status-badge.expired,
html:root body[data-broker-page="plans"] .status-badge.draft,
html:root body[data-broker-page="all-text-drops"] .text-drop-badge.pending {
  background: var(--cs-gray-100) !important;
  color: var(--cs-gray-700) !important;
}

html:root body[data-broker-page="enrollments"] .status-badge.upcoming,
html:root body[data-broker-page="plans"] .status-badge.needs-review {
  background: var(--cs-outline) !important;
  color: var(--cs-primary-deep) !important;
}

/* ---------- From 47-codex-list-labels.css ---------- */
/* X15: mobile broker records keep their field labels at the 12px minimum.
   The authenticated broker navigation keeps shared company records out of DM mode. */
@media (max-width: 767px) {
  html:root body[data-broker-page]:has(#mobileBottomNav[data-role="broker"]) .mint-records td[data-label]:not(:first-child)::before {
    font-size: 12px;
  }
}

/* ==== Ported from the redesign's 50-codex-record-dialogs.css ==== */
/* Broker/company/employee record dialogs, inline record forms and new-hire drawers.
   Explicit page lists preserve the reviewed broker/company/employee scope.
   Contrast is width-independent; inline-style/onclick hooks are retained only where Mint has no named hook. */
html:root body[data-broker-page="company"] .add-emp-step:not(.active):not(.completed) .add-emp-step-label,
html:root body[data-broker-page="company"] .aca-qs-hint,
html:root body[data-broker-page="company"] #aiUploadModal .ai-dropzone-hint,
html:root body[data-broker-page="company"] #renewPlansList > div > div > div + div,
html:root body[data-broker-page="company"] #renewYearPrefix + p,
html:root body[data-broker-page="company"] #editPeriodModal div:has(> label > #edit-autosend-enable) > p,
html:root body[data-broker-page="company"] #sendEnrollmentEmailModal #enrollmentEmailAddress + p,
html:root body[data-broker-page="company"] .modal-overlay .form-hint,
html:root body[data-broker-page="company"] #nhFlowOverlay .nh-select-placeholder,
html:root body[data-broker-page="company"] #nhFlowOverlay .nh-preset-divider,
html:root body[data-broker-page="company"] #nhFlowOverlay .nh-editor-label span,
html:root body[data-broker-page="company"] #nhStepsTimeline > div > p + p,
html:root body[data-broker-page="company"] #planVisibilityModal th small,
html:root body[data-broker-page="companies"] #accessModal .broker-select-placeholder,
html:root body[data-broker-page="company"] #reportConfigPanel .report-columns-group,
html:root body[data-broker-page="company"] #reportConfigPanel .templates-empty,
html:root body[data-broker-page="company"] #sharePortalModal .share-preview-label,
html:root body[data-broker-page="company"] #dnsHelpModal .dns-eg-label,
html:root body[data-broker-page="company"] .onboarding-setting-item .setting-desc,
html:root body[data-broker-page="company"] #edit-autosend-wrap > p,
html:root body[data-broker-page="company"] #emailTypeSelection label:has(> input[name="emailType"]) > div > div + div {
  color: var(--cs-muted) !important;
}

/* Plan Visibility column headers (Default label, All / None) are styled in John's 99-john-benefit-dialogs.css. */

/* Cards without .modal-body (Report Issue/Rate Retry) must scroll themselves.
   Enrollment shares the body/footer layout; Plan Library owns its layout in 52.
   Input 16px rules bridge exactly 768px, outside broker-mobile's 767px limit. */
@media (max-width: 768px) {
  html:root body[data-broker-page="companies"] #addCompanyModal .form-row-3 > .form-group,
  html:root body[data-broker-page="company"] #locationModal .form-row > .form-group,
  html:root body[data-broker-page="company"] #jobClassModal .form-row > .form-group,
  html:root body[data-broker-page="company"] #companyInfoModal .form-row > .form-group,
  html:root body[data-broker-page="company"] #contactInfoModal .form-row > .form-group,
  html:root body[data-broker-page="company"] #onboardingDetailsModal .form-row > .form-group,
  html:root body[data-broker-page="employee"] #compModal .form-row > .form-group {
    /* Core clears top margins only; native bottoms add 20px to stacked grid gaps. */
    margin-bottom: 0 !important;
  }
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)),
  html:root body[data-broker-page="companies"] :where(.modal-overlay),
  html:root body[data-broker-page="employee"] :where(.modal-overlay) {
    padding: 16px 12px !important;
    box-sizing: border-box;
  }
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) > .modal,
  html:root body[data-broker-page="companies"] :where(.modal-overlay) > .modal,
  html:root body[data-broker-page="employee"] :where(.modal-overlay) > .modal {
    display: flex !important;
    flex-direction: column;
    max-height: calc(100dvh - 32px) !important;
    min-height: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
  }
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .modal-body,
  html:root body[data-broker-page="companies"] :where(.modal-overlay) .modal-body,
  html:root body[data-broker-page="employee"] :where(.modal-overlay) .modal-body,
  html:root body[data-broker-page="employee"] .election-modal-body {
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .modal-header,
  html:root body[data-broker-page="companies"] :where(.modal-overlay) .modal-header,
  html:root body[data-broker-page="employee"] :where(.modal-overlay) .modal-header,
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .modal-footer,
  html:root body[data-broker-page="companies"] :where(.modal-overlay) .modal-footer,
  html:root body[data-broker-page="employee"] :where(.modal-overlay) .modal-footer,
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .add-emp-steps-wrap,
  html:root body[data-broker-page="employee"] .election-modal-header {
    flex-shrink: 0;
  }
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .form-hint,
  html:root body[data-broker-page="companies"] :where(.modal-overlay) .form-hint,
  html:root body[data-broker-page="employee"] :where(.modal-overlay) .form-hint,
  html:root body[data-broker-page="companies"] .modal-overlay .broker-tag,
  html:root body[data-broker-page="company"] .send-onboarding-modal .option-desc,
  html:root body[data-broker-page="company"] .onboarding-setting-item .setting-desc,
  html:root body[data-broker-page="company"] #onboardingDetailsModal .checkbox-label-desc,
  html:root body[data-broker-page="company"] .manual-plan-step-circle,
  html:root body[data-broker-page="company"] .share-modal .share-form-label,
  html:root body[data-broker-page="companies"] #accessModal .current-broker-email,
  html:root body[data-broker-page="company"] #aiUploadModal .ai-dropzone-hint,
  html:root body[data-broker-page="employee"] .election-modal .field-group label,
  html:root body[data-broker-page="employee"] .election-modal [style*="0.8rem"],
  html:root body[data-broker-page="company"] #nhStepsTimeline > div > p + p,
  html:root body[data-broker-page="company"] #editPeriodModal label,
  html:root body[data-broker-page="company"] #reportConfigPanel .btn-save-template,
  html:root body[data-broker-page="company"] #rateRetryModal button > div:last-child > div + div,
  html:root body[data-broker-page="company"] #addEmployeeModal .form-label:not([style*="font-size"]),
  html:root body[data-broker-page="companies"] #customizeModal .form-label:not([style*="font-size"]),
  html:root body[data-broker-page="company"] #dmManageView .dm-add-new-btn {
    font-size: max(12px, 0.8rem) !important;
  }
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .add-emp-step-label,
  html:root body[data-broker-page="companies"] #accessModal .current-broker-badge,
  html:root body[data-broker-page="company"] #sharePortalModal .share-preview-label,
  html:root body[data-broker-page="company"] #dnsHelpModal .dns-eg-label {
    font-size: max(12px, 0.7rem) !important;
  }
}
@media (max-width: 768px) {
  html:root body[data-broker-page="company"] .manual-plan-modal input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] .manual-plan-modal select,
  html:root body[data-broker-page="company"] .manual-plan-modal textarea,
  html:root body[data-broker-page="company"] .ai-upload-modal input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] .ai-upload-modal select,
  html:root body[data-broker-page="company"] .ai-upload-modal textarea,
  html:root body[data-broker-page="company"] .onboarding-settings-modal-overlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] .onboarding-settings-modal-overlay select,
  html:root body[data-broker-page="company"] .onboarding-settings-modal-overlay textarea,
  html:root body[data-broker-page="company"] .send-onboarding-modal-overlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] .send-onboarding-modal-overlay select,
  html:root body[data-broker-page="company"] .send-onboarding-modal-overlay textarea,
  html:root body[data-broker-page="company"] .aca-qs-overlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] .aca-qs-overlay select,
  html:root body[data-broker-page="company"] .aca-qs-overlay textarea,
  html:root body[data-broker-page="company"] .modal-overlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="companies"] .modal-overlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="employee"] .modal-overlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] .modal-overlay select,
  html:root body[data-broker-page="companies"] .modal-overlay select,
  html:root body[data-broker-page="employee"] .modal-overlay select,
  html:root body[data-broker-page="company"] .modal-overlay textarea,
  html:root body[data-broker-page="companies"] .modal-overlay textarea,
  html:root body[data-broker-page="employee"] .modal-overlay textarea,
  html:root body[data-broker-page="employee"] .election-modal input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="employee"] .election-modal select,
  html:root body[data-broker-page="employee"] .election-modal textarea,
  html:root body[data-broker-page="company"] #sharePortalModal input,
  html:root body[data-broker-page="company"] #sharePortalModal textarea,
  html:root body[data-broker-page="company"] #nhFlowOverlay input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="company"] #nhFlowOverlay textarea,
  html:root body[data-broker-page="company"] #renewPlansModal input:not([type="checkbox"]),
  html:root body[data-broker-page="company"] #editPeriodModal input:not([type="checkbox"]),
  html:root body[data-broker-page="company"] .modal-overlay .modal-close,
  html:root body[data-broker-page="companies"] .modal-overlay .modal-close,
  html:root body[data-broker-page="employee"] .modal-overlay .modal-close {
    font-size: 16px !important;
  }
}
@media (max-width: 768px) {
  html:root body[data-broker-page="company"] .onboarding-link-display,
  html:root body[data-broker-page="company"] .onboarding-settings-desc,
  html:root body[data-broker-page="employee"] .danger-modal-warning,
  html:root body[data-broker-page="company"] .manual-plan-label,
  html:root body[data-broker-page="employee"] #depModal .dep-modal-section,
  html:root body[data-broker-page="company"] #sharePortalModal .share-preview-content,
  html:root body[data-broker-page="employee"] .election-modal [style*="0.85rem"],
  html:root body[data-broker-page="company"] #aiPrivacyModal [style*="0.85rem"],
  html:root body[data-broker-page="company"] #reportConfigPanel .report-back-btn,
  html:root body[data-broker-page="company"] #reportConfigPanel .report-columns-title,
  html:root body[data-broker-page="company"] #templateModal .template-modal-subtitle,
  html:root body[data-broker-page="company"] #dnsHelpModal code,
  html:root body[data-broker-page="companies"] #accessModal .add-broker-label,
  html:root body[data-broker-page="company"] #createBlockModal label,
  html:root body[data-broker-page="company"] #reportIssueModal label[for="issue_notes"],
  html:root body[data-broker-page="company"] #rateRetryModal button > div:last-child > div:first-child,
  html:root body[data-broker-page="company"] #dmManageView .dm-new-form-actions button,
  html:root body[data-broker-page="company"] :where(.modal-overlay:not(#planLibraryModal)) .form-label:not([style*="font-size"]),
  html:root body[data-broker-page="companies"] :where(.modal-overlay) .form-label:not([style*="font-size"]),
  html:root body[data-broker-page="employee"] :where(.modal-overlay) .form-label:not([style*="font-size"]) {
    font-size: max(12px, 0.85rem) !important;
  }
}
@media (max-width: 768px) {
  html:root body[data-broker-page="company"] .modal-overlay label:has(input[type="checkbox"]),
  html:root body[data-broker-page="companies"] .modal-overlay label:has(input[type="checkbox"]),
  html:root body[data-broker-page="employee"] .modal-overlay label:has(input[type="checkbox"]),
  html:root body[data-broker-page="company"] .modal-overlay label:has(input[type="radio"]),
  html:root body[data-broker-page="companies"] .modal-overlay label:has(input[type="radio"]),
  html:root body[data-broker-page="employee"] .modal-overlay label:has(input[type="radio"]) {
    min-height: 36px !important;
  }
}

/* ==== Ported from the redesign's 51-codex-message-dialogs.css ==== */
/* X19: broker Email, Text Drop, campaign and editor forms. */

/* Contrast does not depend on viewport width. */
html:root body[data-broker-page].em-standalone .em-preset-lead,
html:root body[data-broker-page].em-standalone .em-seg-empty,
html:root body[data-broker-page="text-drops"] .compose-area .form-hint,
html:root body[data-broker-page="text-drops"] .compose-area .char-counter:not(.warning):not(.danger),
html:root body[data-broker-page="text-drops"] .compose-area .segment-info {
  color: var(--cs-gray-700);
}

@media (max-width: 768px) {
  /* Mint supplies phone sizing below 768px; 16px text still needs to beat core at exactly 768px. */
  html:root body[data-broker-page].em-standalone input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html:root body[data-broker-page].em-standalone select,
  html:root body[data-broker-page].em-standalone textarea,
  html:root body[data-broker-page="dashboard"] #sendEmailModal input,
  html:root body[data-broker-page="all-text-drops"] #selectCompanyModal input,
  html:root body[data-broker-page="text-drops"] .compose-area input:not([type="checkbox"]),
  html:root body[data-broker-page="text-drops"] .compose-area textarea,
  html:root body[data-broker-page="campaigns"] #createModal input:not([type="checkbox"]),
  html:root body[data-broker-page="campaigns"] #createModal select,
  html:root body[data-broker-page="campaigns"] #createModal textarea {
    font-size: 16px !important;
  }
  /* Retain Mint's native rem size whenever it is larger than the readable floor. */
  html:root body[data-broker-page].em-standalone .em-pageview .em-preset-lead,
  html:root body[data-broker-page].em-standalone .em-aud-count .lbl,
  html:root body[data-broker-page].em-standalone .em-pageview .em-check,
  html:root body[data-broker-page="all-text-drops"] #selectCompanyModal label,
  html:root body[data-broker-page="text-drops"] .compose-area .form-label,
  html:root body[data-broker-page="text-drops"] .compose-area .schedule-option span,
  html:root body[data-broker-page="text-drops"] .compose-area .recipient-count,
  html:root body[data-broker-page="text-drops"] .compose-area .select-all-wrap span,
  html:root body[data-broker-page="text-drops"] .compose-area .history-message,
  html:root body[data-broker-page].em-standalone .em-loading,
  html:root body[data-broker-page].em-standalone #tab-settings .em-switch-row,
  html:root body[data-broker-page].em-standalone #tab-settings .em-health-row {
    font-size: max(12px, 0.85rem);
  }
}

@media (max-width: 768px) {
  html:root body[data-broker-page].em-standalone .em-pageview .em-preset {
    font-size: max(12px, 0.83rem);
    min-width: 36px;
    min-height: 36px;
  }
  html:root body[data-broker-page].em-standalone .em-seg-head,
  html:root body[data-broker-page].em-standalone #tab-automations .em-kv,
  html:root body[data-broker-page="campaigns"] #createModal .form-group > label {
    font-size: max(12px, 0.82rem);
  }
  html:root body[data-broker-page].em-standalone .em-pageview .em-review-label {
    font-size: max(12px, 0.8125rem);
  }
  html:root body[data-broker-page].em-standalone .em-seg-empty,
  html:root body[data-broker-page="text-drops"] .compose-area .form-hint,
  html:root body[data-broker-page="text-drops"] .compose-area .char-counter,
  html:root body[data-broker-page].em-standalone .em-loading > span,
  html:root body[data-broker-page].em-standalone #tab-automations .em-run-row {
    font-size: max(12px, 0.8rem);
  }
  html:root body[data-broker-page].em-standalone .em-journey-card .desc {
    font-size: max(12px, 0.78rem);
  }
  html:root body[data-broker-page].em-standalone .em-seg-val .unit,
  html:root body[data-broker-page="all-text-drops"] #selectCompanyModal .company-item-meta,
  html:root body[data-broker-page="text-drops"] .compose-area .segment-info,
  html:root body[data-broker-page="text-drops"] .compose-area .quick-tag code,
  html:root body[data-broker-page="text-drops"] .compose-area .history-meta,
  html:root body[data-broker-page].em-standalone #tab-settings .em-switch-row .sub {
    font-size: max(12px, 0.75rem);
  }
  html:root body[data-broker-page].em-standalone .em-journey-card .steps {
    font-size: max(12px, 0.74rem);
  }
  html:root body[data-broker-page].em-standalone .em-pageview .em-step:not(.done) .n {
    font-size: max(12px, 0.72rem);
  }
  html:root body[data-broker-page="text-drops"] .compose-area .history-cancel-btn,
  html:root body[data-broker-page].em-standalone .em-var-picker button {
    font-size: max(12px, 0.7rem);
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 768px) {
  html:root body[data-broker-page].em-standalone .modal .em-preview-toggle button {
    min-width: 36px;
    min-height: 36px;
    font-size: max(12px, 0.8rem);
  }
  html:root body[data-broker-page="dashboard"] #sendEmailModal .copy-link-btn,
  html:root body[data-broker-page].em-standalone .em-seg-match button,
  html:root body[data-broker-page="text-drops"] .compose-area .quick-tag,
  html:root body[data-broker-page="email-editor"] .ed-icon-btn,
  html:root body[data-broker-page="email-editor"] .ed-device button,
  html:root body[data-broker-page="email-editor"] .ed-var-btn,
  html:root body[data-broker-page="email-editor"] .ed-preview-tab,
  html:root body[data-broker-page="email-editor"] .ed-seg-btn {
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 768px) {
  /* Navigation painted over contact footers/preview content; the pill also intercepted
     outline controls in the full-page Content/Style panels at 390px during round four. */
  html:root body[data-broker-page].em-standalone:has(.modal-overlay.open) .mint-workspace-nav,
  html:root body[data-broker-page].em-standalone:has(.em-drawer-overlay.open) .mint-workspace-nav {
    visibility: hidden;
  }
}

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

html:root body[data-broker-page="company"] #oe-create-form #oe-autosend-wrap p,
html:root body[data-broker-page="enrollments"] #extendModal #effectiveDateHint,
html:root body[data-broker-page="enrollments"] #extendModal .extend-divider,
html:root body[data-broker-page="enrollments"] #extendModal .extend-option-text small,
html:root body[data-broker-page="library"] #uploadModal .modal-subtitle,
html:root body[data-broker-page="library"] #uploadModal .upload-zone-hint,
html:root body[data-broker-page="library"] #uploadModal #previewFileSize,
html:root body[data-broker-page="library"] #createPacketModal #packetFormCount,
html:root body[data-broker-page="library"] #createPacketModal #packetFormsList > div,
html:root body[data-broker-page="library"] #packetFormsList .packet-form-item > div:last-child > div + div,
html:root body[data-broker-page="library"] #createPacketModal #packetFormsList + div {
  color: var(--cs-gray-500) !important;
}

html:root body[data-broker-page="library"] #uploadModal .upload-zone:hover .upload-zone-text,
html:root body[data-broker-page="plans"] #wizardSection .wizard-step.active {
  color: var(--cs-primary-deep) !important;
}

@media (max-width: 768px) {
  /* Keep Mint's <=767px input floor at exactly 768px too. Company modal inputs
     receive the same floor in 50; the inline New Enrollment form needs its own rule. */
  html:root body[data-broker-page="company"] #oe-create-form .form-input,
  html:root body[data-broker-page="enrollments"] #extendModal input[type="date"],
  html:root body[data-broker-page="library"] #uploadModal input:not([type="file"]),
  html:root body[data-broker-page="library"] #uploadModal select,
  html:root body[data-broker-page="plans"] #wizardSection input:not([type="checkbox"]):not([type="radio"]),
  html:root body[data-broker-page="plans"] #wizardSection select,
  html:root body[data-broker-page="plans"] #wizardSection textarea,
  html:root body[data-broker-page="settings"] .settings-section input:not([type="checkbox"]):not([type="radio"]):not(.twofa-verify-input),
  html:root body[data-broker-page="settings"] .settings-section select,
  html:root body[data-broker-page="settings"] .settings-section textarea {
    font-size: 16px !important;
  }

  /* Retain each element's native rem size while adding a readable minimum. */
  html:root body[data-broker-page="company"] #enrollmentModal .form-label,
  html:root body[data-broker-page="company"] #planLibraryModal .plan-library-empty p + p,
  html:root body[data-broker-page="company"] #planLibraryModal .plan-library-footer-left,
  html:root body[data-broker-page="enrollments"] #extendModal .modal-body > #extendCompanyName + div,
  html:root body[data-broker-page="library"] #uploadModal .form-label,
  html:root body[data-broker-page="library"] #uploadModal .modal-subtitle,
  html:root body[data-broker-page="library"] #uploadModal .upload-zone-hint,
  html:root body[data-broker-page="library"] #createPacketModal #packetFormsList > div,
  html:root body[data-broker-page="library"] #packetFormsList .packet-form-item > div:last-child > div:first-child,
  html:root body[data-broker-page="settings"] .settings-section .form-label,
  html:root body[data-broker-page="settings"] .settings-section .copy-btn,
  html:root body[data-broker-page="settings"] .settings-section .card-desc,
  html:root body[data-broker-page="settings"] .settings-section .twofa-desc,
  html:root body[data-broker-page="settings"] .settings-section .slug-input-prefix .prefix,
  html:root body[data-broker-page="settings"] .settings-section .theme-toggle-desc,
  html:root body[data-broker-page="settings"] #erAppsEmptyHint {
    font-size: max(12px, 0.85rem) !important;
  }

  html:root body[data-broker-page="company"] #enrollmentModal .checkbox-label-desc,
  html:root body[data-broker-page="company"] #oe-create-form label:not(:has(#oe-autosend-enable)),
  html:root body[data-broker-page="enrollments"] #extendModal .date-input-group label,
  html:root body[data-broker-page="enrollments"] #extendModal .extend-divider,
  html:root body[data-broker-page="enrollments"] #extendModal .extend-option-text small,
  html:root body[data-broker-page="library"] #uploadModal #previewFileSize,
  html:root body[data-broker-page="library"] #createPacketModal .send-email-field > label,
  html:root body[data-broker-page="library"] #createPacketModal .send-email-field > div > label:not([id]):not(.packet-form-item),
  html:root body[data-broker-page="plans"] #wizardSection .form-hint,
  html:root body[data-broker-page="plans"] #wizardSection .wizard-step-number,
  html:root body[data-broker-page="settings"] .settings-section .form-hint,
  html:root body[data-broker-page="settings"] .settings-section .requirement,
  html:root body[data-broker-page="settings"] .settings-section .password-generator-text span {
    font-size: max(12px, 0.8rem) !important;
  }
}

@media (max-width: 768px) {

  html:root body[data-broker-page="enrollments"] #extendModal #effectiveDateHint,
  html:root body[data-broker-page="library"] #createPacketModal #packetFormCount,
  html:root body[data-broker-page="plans"] #wizardSection .plan-summary-item label {
    font-size: max(12px, 0.75rem) !important;
  }
}

@media (max-width: 768px) {

  /* Wizard and Library footer actions occupy the floating widgets' area.
     Company modal switches are handled by 50's single company rule. */
  /* Mint retains display:block across tab changes; active ancestors tie pill hiding to the visible form. */

  html:root body[data-broker-page="plans"]:has(#wizardSection.active) #chatAiBtn,
  html:root body[data-broker-page="library"]:has(#createPacketModal) #chatAiBtn,
  html:root body[data-broker-page="library"]:has(#previewModal.open) #chatAiBtn,
  html:root body[data-broker-page="library"]:has(#sendEmailModal.open) #chatAiBtn,
  html:root body[data-broker-page="library"]:has(#sendFormTextModal) #chatAiBtn,
  html:root body[data-broker-page="library"]:has(#secureLinkExpiration) #chatAiBtn {
    display: none !important;
  }
}

@media (max-width: 768px) {

  /* Reserve 64px for the broker bottom navigation plus 24px clearance. With 12px
     top padding this leaves 100px outside the card. Root/card auto overflow also
     keeps actions reachable in short keyboard viewports without a .modal-body. */
  html:root body[data-broker-page="company"] #planLibraryModal,
  html:root body[data-broker-page="enrollments"] #extendModal {
    padding: 12px 12px 88px !important;
    box-sizing: border-box;
    overflow: auto;
  }
}

@media (max-width: 768px) {

  html:root body[data-broker-page="company"] #planLibraryModal .modal-body,
  html:root body[data-broker-page="enrollments"] #extendModal .modal-body,
  html:root body[data-broker-page="library"] #uploadModal .modal-body,
  html:root body[data-broker-page="library"] #createPacketModal .send-email-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html:root body[data-broker-page="company"] #planLibraryModal .modal-header,
  html:root body[data-broker-page="enrollments"] #extendModal .modal-header,
  html:root body[data-broker-page="enrollments"] #extendModal .modal-footer,
  html:root body[data-broker-page="library"] #uploadModal .modal-header,
  html:root body[data-broker-page="library"] #uploadModal .modal-footer,
  html:root body[data-broker-page="library"] #createPacketModal .send-email-header {
    flex-shrink: 0;
  }
}

/* ==== Ported from the redesign's 90-john-mint-buttons.css ==== */
/* ---------- Preview (John): Mint's current buttons inside the new look ----------
   Repaints every action button with Mint's own button system, MINT-BTN-V2 in Mint's
   public/css/mint-buttons-v1.css: moulded teal gradient for primary, white card for
   secondary, moulded red for danger, flat ghost. Sizes and spacing stay the new look's
   (44px, 36px small), so no layout moves. Tabs, segmented controls, pagination, view
   switches and the chat button keep the new look, as Mint's system leaves them alone too.

   00-tokens.css flattens Mint's --mint-btn-* ladder to one colour, so this file carries
   Mint's recipe itself as --jb-*: top +15% white, highlight +30% white, ring +10% black,
   built from --brand (a white-label company colour on DM and employee pages) or Mint's
   teal #1f8f88.

   :not(#mint-btn) adds id weight so these beat the page-specific button rules in
   10-core.css and the codex files. Later blocks win ties: secondary, then brand ink,
   primary, danger, ghost, disabled, focus. Broker material variables can opt into
   the paid-team reference without changing these defaults on other roles. */

/* Mint's button colours (the same recipe as mint-buttons-v1.css) */
html:root:not(#ui) body {
  /* Fallback is the theme teal (#1a7a74, white text 5.15:1); Mint's #1f8f88 gives 3.9:1. The highlight is kept subtle
     (92% at rest, 88% on hover) so white text on the gradient stays at 4.5:1 or more. */
  --jb-brand: var(--brand, var(--brand-primary, var(--cs-primary)));
  --jb-brand-top: color-mix(in srgb, var(--jb-brand) 92%, #fff);
  --jb-brand-hover-top: color-mix(in srgb, var(--jb-brand) 88%, #fff);
  --jb-brand-edge: color-mix(in srgb, var(--jb-brand) 70%, #fff);
  --jb-brand-press: color-mix(in srgb, var(--jb-brand) 90%, #000);
  --jb-glow: color-mix(in srgb, var(--jb-brand) 42%, transparent);
  --jb-glow-hover: color-mix(in srgb, var(--jb-brand) 52%, transparent);
  /* Accessible red (white text 4.8:1); Mint's #e0524a gives 3.8:1. */
  --jb-danger: var(--cs-bad-strong);
  --jb-danger-top: color-mix(in srgb, var(--jb-danger) 92%, #fff);
  --jb-danger-hover-top: color-mix(in srgb, var(--jb-danger) 88%, #fff);
  --jb-danger-edge: color-mix(in srgb, var(--jb-danger) 70%, #fff);
  --jb-danger-press: color-mix(in srgb, var(--jb-danger) 90%, #000);
  --jb-line: #e2e8f0;
  --jb-line-hover: #cbd5e1;
  --jb-ink: #334155;
}

/* Secondary: Mint's white card (plain .btn included, so no tinted strays remain) */
html:root:not(#ui) body .btn,
html:root:not(#ui) body .btn-secondary,
html:root:not(#ui) body .btn-outline,
html:root:not(#ui) body .btn-cancel,
html:root:not(#ui) body .btn-back,
html:root:not(#ui) body .btn-forms-library,
html:root:not(#ui) body .back-btn,
html:root:not(#ui) body .skip-btn,
html:root:not(#ui) body .start-over-btn,
html:root:not(#ui) body .text-drops-btn,
html:root:not(#ui) body .company-switcher-btn,
html:root:not(#ui) body .template-callout-btn,
html:root:not(#ui) body .template-use-btn,
html:root:not(#ui) body .btn-export,
html:root:not(#ui) body .edit-btn,
html:root:not(#ui) body .modal-btn-cancel,
html:root:not(#ui) body .send-email-cancel,
html:root:not(#ui) body .confirm-modal-cancel,
html:root:not(#ui) body .wizard-view-btn,
html:root:not(#ui) body .login-action-btn,
html:root:not(#ui) body .application-button,
html:root:not(#ui) body .quick-extend-btn,
html:root:not(#ui) body .slug-btn,
html:root:not(#ui) body .profile-edit-btn,
html:root:not(#ui) body .aca-quick-btn,
html:root:not(#ui) body #tab-aca button.aca-quick-btn,
html:root:not(#ui) body #copyEnrollmentLinkBtn,
html:root:not(#ui) body #electionAuditToggleBtn {
  border: 0 !important;
  border-radius: var(--jb-radius, 12px) !important;
  color: var(--jb-ink) !important;
  background-color: #fff !important;
  background-image: var(--jb-secondary-image, linear-gradient(180deg, #fff 0%, #fbfcfd 100%)) !important;
  box-shadow: var(--jb-secondary-shadow, inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px var(--jb-line), 0 1px 2px rgba(16, 24, 40, .05)) !important;
}
html:root:not(#ui) body .btn:hover,
html:root:not(#ui) body .btn-secondary:hover,
html:root:not(#ui) body .btn-outline:hover,
html:root:not(#ui) body .btn-cancel:hover,
html:root:not(#ui) body .btn-back:hover,
html:root:not(#ui) body .btn-forms-library:hover,
html:root:not(#ui) body .back-btn:hover,
html:root:not(#ui) body .skip-btn:hover,
html:root:not(#ui) body .start-over-btn:hover,
html:root:not(#ui) body .text-drops-btn:hover,
html:root:not(#ui) body .company-switcher-btn:hover,
html:root:not(#ui) body .template-callout-btn:hover,
html:root:not(#ui) body .template-use-btn:hover,
html:root:not(#ui) body .btn-export:hover,
html:root:not(#ui) body .edit-btn:hover,
html:root:not(#ui) body .modal-btn-cancel:hover,
html:root:not(#ui) body .send-email-cancel:hover,
html:root:not(#ui) body .confirm-modal-cancel:hover,
html:root:not(#ui) body .wizard-view-btn:hover,
html:root:not(#ui) body .login-action-btn:hover,
html:root:not(#ui) body .application-button:hover,
html:root:not(#ui) body .quick-extend-btn:hover,
html:root:not(#ui) body .slug-btn:hover,
html:root:not(#ui) body .profile-edit-btn:hover,
html:root:not(#ui) body .aca-quick-btn:hover,
html:root:not(#ui) body #tab-aca button.aca-quick-btn:hover,
html:root:not(#ui) body #copyEnrollmentLinkBtn:hover,
html:root:not(#ui) body #electionAuditToggleBtn:hover {
  color: #0f172a !important;
  background-color: var(--jb-secondary-hover-fill, #fff) !important;
  background-image: var(--jb-secondary-hover-image, linear-gradient(180deg, #fff 0%, #f6f8fa 100%)) !important;
  box-shadow: var(--jb-secondary-hover-shadow, inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px var(--jb-line-hover), 0 3px 8px -2px rgba(16, 24, 40, .12)) !important;
}
html:root:not(#ui) body .btn:active,
html:root:not(#ui) body .btn-secondary:active,
html:root:not(#ui) body .btn-outline:active,
html:root:not(#ui) body .btn-cancel:active,
html:root:not(#ui) body .back-btn:active,
html:root:not(#ui) body .text-drops-btn:active,
html:root:not(#ui) body .company-switcher-btn:active,
html:root:not(#ui) body .profile-edit-btn:active {
  background-image: none !important;
  background-color: #f1f5f9 !important;
  box-shadow: var(--jb-secondary-press-shadow, inset 0 2px 3px rgba(16, 24, 40, .10), inset 0 0 0 1px var(--jb-line-hover)) !important;
}

/* Brand-inked white buttons, where Mint uses them for a real action */
html:root:not(#ui) body .btn-secondary.is-brand,
html:root:not(#ui) body .btn-outline.is-brand,
html:root:not(#ui) body .text-drops-btn,
html:root:not(#ui) body .template-callout-btn,
html:root:not(#ui) body .btn-forms-library { color: var(--jb-brand) !important; }
html:root:not(#ui) body .btn-secondary.is-brand:hover,
html:root:not(#ui) body .btn-outline.is-brand:hover,
html:root:not(#ui) body .text-drops-btn:hover,
html:root:not(#ui) body .template-callout-btn:hover,
html:root:not(#ui) body .btn-forms-library:hover { color: var(--jb-brand-press) !important; }
html:root:not(#ui) body .btn-icon-danger { color: var(--jb-danger) !important; }

/* Primary: Mint's moulded teal */
html:root:not(#ui) body .btn-primary,
html:root:not(#ui) body .btn.is-brand,
html:root:not(#ui) body .btn-header.is-brand,
html:root:not(#ui) body .btn-send,
html:root:not(#ui) body .btn-add,
html:root:not(#ui) body .btn-confirm,
html:root:not(#ui) body .btn-success,
html:root:not(#ui) body .btn-connect,
html:root:not(#ui) body .btn-generate,
html:root:not(#ui) body .btn-save-slug,
html:root:not(#ui) body .btn-upload,
html:root:not(#ui) body .controls-add,
html:root:not(#ui) body .confirm-btn,
html:root:not(#ui) body .upload-btn,
html:root:not(#ui) body .fix-issues-btn,
html:root:not(#ui) body .empty-state-btn,
html:root:not(#ui) body .send-email-submit,
html:root:not(#ui) body .modal-btn-save,
html:root:not(#ui) body .confirm-modal-confirm,
html:root:not(#ui) body .btn-brand,
html:root:not(#ui) body .election-add-btn,
html:root:not(#ui) body .nh-trigger-btn,
html:root:not(#ui) body .locations-empty-btn,
html:root:not(#ui) body .btn-enroll,
html:root:not(#ui) body .aca-btn-primary,
html:root:not(#ui) body .btn-add-note,
html:root:not(#ui) body .btn-add-comp,
html:root:not(#ui) body .dep-add-btn {
  border: 0 !important;
  border-radius: var(--jb-radius, 12px) !important;
  color: #fff !important;
  background-color: var(--jb-brand) !important;
  background-image: var(--jb-primary-image, linear-gradient(180deg, var(--jb-brand-top) 0%, var(--jb-brand) 100%)) !important;
  box-shadow: var(--jb-primary-shadow, inset 0 1px 0 0 var(--jb-brand-edge), 0 0 0 1px var(--jb-brand-press),
    0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px -2px var(--jb-glow)) !important;
}
html:root:not(#ui) body .btn-primary:hover,
html:root:not(#ui) body .btn.is-brand:hover,
html:root:not(#ui) body .btn-header.is-brand:hover,
html:root:not(#ui) body .btn-send:hover,
html:root:not(#ui) body .btn-add:hover,
html:root:not(#ui) body .btn-confirm:hover,
html:root:not(#ui) body .btn-success:hover,
html:root:not(#ui) body .btn-connect:hover,
html:root:not(#ui) body .btn-generate:hover,
html:root:not(#ui) body .btn-save-slug:hover,
html:root:not(#ui) body .btn-upload:hover,
html:root:not(#ui) body .controls-add:hover,
html:root:not(#ui) body .confirm-btn:hover,
html:root:not(#ui) body .upload-btn:hover,
html:root:not(#ui) body .fix-issues-btn:hover,
html:root:not(#ui) body .empty-state-btn:hover,
html:root:not(#ui) body .send-email-submit:hover,
html:root:not(#ui) body .modal-btn-save:hover,
html:root:not(#ui) body .confirm-modal-confirm:hover,
html:root:not(#ui) body .btn-brand:hover,
html:root:not(#ui) body .election-add-btn:hover,
html:root:not(#ui) body .nh-trigger-btn:hover,
html:root:not(#ui) body .locations-empty-btn:hover,
html:root:not(#ui) body .btn-enroll:hover,
html:root:not(#ui) body .aca-btn-primary:hover,
html:root:not(#ui) body .btn-add-note:hover,
html:root:not(#ui) body .btn-add-comp:hover,
html:root:not(#ui) body .dep-add-btn:hover {
  color: #fff !important;
  background-color: var(--jb-primary-hover-fill, var(--jb-brand)) !important;
  background-image: var(--jb-primary-hover-image, linear-gradient(180deg, var(--jb-brand-hover-top) 0%, var(--jb-brand) 100%)) !important;
  box-shadow: var(--jb-primary-hover-shadow, inset 0 1px 0 0 var(--jb-brand-edge), 0 0 0 1px var(--jb-brand-press),
    0 1px 2px rgba(16, 24, 40, .10), 0 6px 18px -4px var(--jb-glow-hover)) !important;
}
html:root:not(#ui) body .btn-primary:active,
html:root:not(#ui) body .btn.is-brand:active,
html:root:not(#ui) body .btn-header.is-brand:active,
html:root:not(#ui) body .btn-send:active,
html:root:not(#ui) body .btn-add:active,
html:root:not(#ui) body .btn-confirm:active,
html:root:not(#ui) body .btn-success:active,
html:root:not(#ui) body .btn-connect:active,
html:root:not(#ui) body .btn-generate:active,
html:root:not(#ui) body .btn-save-slug:active,
html:root:not(#ui) body .btn-upload:active,
html:root:not(#ui) body .controls-add:active,
html:root:not(#ui) body .confirm-btn:active,
html:root:not(#ui) body .upload-btn:active,
html:root:not(#ui) body .fix-issues-btn:active,
html:root:not(#ui) body .empty-state-btn:active,
html:root:not(#ui) body .send-email-submit:active,
html:root:not(#ui) body .modal-btn-save:active,
html:root:not(#ui) body .confirm-modal-confirm:active,
html:root:not(#ui) body .btn-brand:active,
html:root:not(#ui) body .election-add-btn:active,
html:root:not(#ui) body .nh-trigger-btn:active,
html:root:not(#ui) body .locations-empty-btn:active,
html:root:not(#ui) body .btn-enroll:active,
html:root:not(#ui) body .aca-btn-primary:active,
html:root:not(#ui) body .btn-add-note:active,
html:root:not(#ui) body .btn-add-comp:active,
html:root:not(#ui) body .dep-add-btn:active {
  color: #fff !important;
  background-image: none !important;
  background-color: var(--jb-brand-press) !important;
  box-shadow: var(--jb-primary-press-shadow, inset 0 2px 5px rgba(0, 0, 0, .24), 0 0 0 1px var(--jb-brand-press)) !important;
}

/* Icons in filled buttons follow the label colour (Mint paints the Upload Form "+" teal on teal) */
html:root:not(#ui) body .btn-primary i,
html:root:not(#ui) body .btn.is-brand i,
html:root:not(#ui) body .btn-header.is-brand i,
html:root:not(#ui) body .btn-send i,
html:root:not(#ui) body .btn-add i,
html:root:not(#ui) body .btn-confirm i,
html:root:not(#ui) body .btn-success i,
html:root:not(#ui) body .btn-connect i,
html:root:not(#ui) body .btn-generate i,
html:root:not(#ui) body .btn-save-slug i,
html:root:not(#ui) body .btn-upload i,
html:root:not(#ui) body .controls-add i,
html:root:not(#ui) body .confirm-btn i,
html:root:not(#ui) body .upload-btn i,
html:root:not(#ui) body .fix-issues-btn i,
html:root:not(#ui) body .empty-state-btn i,
html:root:not(#ui) body .send-email-submit i,
html:root:not(#ui) body .modal-btn-save i,
html:root:not(#ui) body .confirm-modal-confirm i,
html:root:not(#ui) body .btn-brand i,
html:root:not(#ui) body .election-add-btn i,
html:root:not(#ui) body .nh-trigger-btn i,
html:root:not(#ui) body .locations-empty-btn i,
html:root:not(#ui) body .btn-enroll i,
html:root:not(#ui) body .aca-btn-primary i,
html:root:not(#ui) body .btn-add-note i,
html:root:not(#ui) body .btn-add-comp i,
html:root:not(#ui) body .dep-add-btn i,
html:root:not(#ui) body .btn-danger i,
html:root:not(#ui) body .btn-disconnect i,
html:root:not(#ui) body .btn-primary svg,
html:root:not(#ui) body .btn.is-brand svg,
html:root:not(#ui) body .btn-header.is-brand svg,
html:root:not(#ui) body .btn-send svg,
html:root:not(#ui) body .btn-add svg,
html:root:not(#ui) body .btn-confirm svg,
html:root:not(#ui) body .btn-success svg,
html:root:not(#ui) body .btn-connect svg,
html:root:not(#ui) body .btn-generate svg,
html:root:not(#ui) body .btn-save-slug svg,
html:root:not(#ui) body .btn-upload svg,
html:root:not(#ui) body .controls-add svg,
html:root:not(#ui) body .confirm-btn svg,
html:root:not(#ui) body .upload-btn svg,
html:root:not(#ui) body .fix-issues-btn svg,
html:root:not(#ui) body .empty-state-btn svg,
html:root:not(#ui) body .send-email-submit svg,
html:root:not(#ui) body .modal-btn-save svg,
html:root:not(#ui) body .confirm-modal-confirm svg,
html:root:not(#ui) body .btn-brand svg,
html:root:not(#ui) body .election-add-btn svg,
html:root:not(#ui) body .nh-trigger-btn svg,
html:root:not(#ui) body .locations-empty-btn svg,
html:root:not(#ui) body .btn-enroll svg,
html:root:not(#ui) body .aca-btn-primary svg,
html:root:not(#ui) body .btn-add-note svg,
html:root:not(#ui) body .btn-add-comp svg,
html:root:not(#ui) body .dep-add-btn svg,
html:root:not(#ui) body .btn-danger svg,
html:root:not(#ui) body .btn-disconnect svg { color: inherit !important; }

/* Danger: Mint's moulded red */
html:root:not(#ui) body .btn-danger,
html:root:not(#ui) body .btn-disconnect {
  border: 0 !important;
  border-radius: var(--jb-radius, 12px) !important;
  color: #fff !important;
  background-color: var(--jb-danger) !important;
  background-image: var(--jb-danger-image, linear-gradient(180deg, var(--jb-danger-top) 0%, var(--jb-danger) 100%)) !important;
  box-shadow: var(--jb-primary-shadow, inset 0 1px 0 0 var(--jb-danger-edge), 0 0 0 1px var(--jb-danger-press),
    0 1px 2px rgba(16, 24, 40, .10), 0 2px 8px -2px color-mix(in srgb, var(--jb-danger) 42%, transparent)) !important;
}
html:root:not(#ui) body .btn-danger:hover,
html:root:not(#ui) body .btn-disconnect:hover {
  color: #fff !important;
  background-color: var(--jb-danger-hover-fill, var(--jb-danger)) !important;
  background-image: var(--jb-danger-hover-image, linear-gradient(180deg, var(--jb-danger-hover-top) 0%, var(--jb-danger) 100%)) !important;
  box-shadow: var(--jb-primary-hover-shadow, inset 0 1px 0 0 var(--jb-danger-edge), 0 0 0 1px var(--jb-danger-press),
    0 1px 2px rgba(16, 24, 40, .10), 0 6px 18px -4px color-mix(in srgb, var(--jb-danger) 52%, transparent)) !important;
}
html:root:not(#ui) body .btn-danger:active,
html:root:not(#ui) body .btn-disconnect:active {
  color: #fff !important;
  background-image: none !important;
  background-color: var(--jb-danger-press) !important;
  box-shadow: var(--jb-primary-press-shadow, inset 0 2px 5px rgba(0, 0, 0, .24), 0 0 0 1px var(--jb-danger-press)) !important;
}

/* Ghost stays flat, as in Mint */
html:root:not(#ui) body .btn-ghost {
  color: #64748b !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root:not(#ui) body .btn-ghost:hover { color: #0f172a !important; background: rgba(15, 23, 42, .05) !important; }

/* Small buttons: same moulding, Mint's smaller corner */
html:root:not(#ui) body .btn-sm,
html:root:not(#ui) body .profile-edit-btn,
html:root:not(#ui) body .aca-quick-btn,
html:root:not(#ui) body #tab-aca button.aca-quick-btn { border-radius: var(--jb-radius, 10px) !important; }

/* Disabled: flatten, so a dead button never looks pressable (also Mint's .disabled class and aria-disabled) */
html:root:not(#ui) body .btn:disabled,
html:root:not(#ui) body .btn.disabled,
html:root:not(#ui) body .btn[aria-disabled="true"],
html:root:not(#ui) body .btn-secondary:disabled,
html:root:not(#ui) body .btn-secondary.disabled,
html:root:not(#ui) body .btn-secondary[aria-disabled="true"],
html:root:not(#ui) body .btn-outline:disabled,
html:root:not(#ui) body .btn-outline.disabled,
html:root:not(#ui) body .btn-outline[aria-disabled="true"],
html:root:not(#ui) body .btn-cancel:disabled,
html:root:not(#ui) body .btn-cancel.disabled,
html:root:not(#ui) body .btn-cancel[aria-disabled="true"],
html:root:not(#ui) body .btn-back:disabled,
html:root:not(#ui) body .btn-back.disabled,
html:root:not(#ui) body .btn-back[aria-disabled="true"],
html:root:not(#ui) body .btn-forms-library:disabled,
html:root:not(#ui) body .btn-forms-library.disabled,
html:root:not(#ui) body .btn-forms-library[aria-disabled="true"],
html:root:not(#ui) body .back-btn:disabled,
html:root:not(#ui) body .back-btn.disabled,
html:root:not(#ui) body .back-btn[aria-disabled="true"],
html:root:not(#ui) body .skip-btn:disabled,
html:root:not(#ui) body .skip-btn.disabled,
html:root:not(#ui) body .skip-btn[aria-disabled="true"],
html:root:not(#ui) body .start-over-btn:disabled,
html:root:not(#ui) body .start-over-btn.disabled,
html:root:not(#ui) body .start-over-btn[aria-disabled="true"],
html:root:not(#ui) body .text-drops-btn:disabled,
html:root:not(#ui) body .text-drops-btn.disabled,
html:root:not(#ui) body .text-drops-btn[aria-disabled="true"],
html:root:not(#ui) body .company-switcher-btn:disabled,
html:root:not(#ui) body .company-switcher-btn.disabled,
html:root:not(#ui) body .company-switcher-btn[aria-disabled="true"],
html:root:not(#ui) body .template-callout-btn:disabled,
html:root:not(#ui) body .template-callout-btn.disabled,
html:root:not(#ui) body .template-callout-btn[aria-disabled="true"],
html:root:not(#ui) body .template-use-btn:disabled,
html:root:not(#ui) body .template-use-btn.disabled,
html:root:not(#ui) body .template-use-btn[aria-disabled="true"],
html:root:not(#ui) body .btn-export:disabled,
html:root:not(#ui) body .btn-export.disabled,
html:root:not(#ui) body .btn-export[aria-disabled="true"],
html:root:not(#ui) body .edit-btn:disabled,
html:root:not(#ui) body .edit-btn.disabled,
html:root:not(#ui) body .edit-btn[aria-disabled="true"],
html:root:not(#ui) body .modal-btn-cancel:disabled,
html:root:not(#ui) body .modal-btn-cancel.disabled,
html:root:not(#ui) body .modal-btn-cancel[aria-disabled="true"],
html:root:not(#ui) body .send-email-cancel:disabled,
html:root:not(#ui) body .send-email-cancel.disabled,
html:root:not(#ui) body .send-email-cancel[aria-disabled="true"],
html:root:not(#ui) body .confirm-modal-cancel:disabled,
html:root:not(#ui) body .confirm-modal-cancel.disabled,
html:root:not(#ui) body .confirm-modal-cancel[aria-disabled="true"],
html:root:not(#ui) body .wizard-view-btn:disabled,
html:root:not(#ui) body .wizard-view-btn.disabled,
html:root:not(#ui) body .wizard-view-btn[aria-disabled="true"],
html:root:not(#ui) body .login-action-btn:disabled,
html:root:not(#ui) body .login-action-btn.disabled,
html:root:not(#ui) body .login-action-btn[aria-disabled="true"],
html:root:not(#ui) body .application-button:disabled,
html:root:not(#ui) body .application-button.disabled,
html:root:not(#ui) body .application-button[aria-disabled="true"],
html:root:not(#ui) body .quick-extend-btn:disabled,
html:root:not(#ui) body .quick-extend-btn.disabled,
html:root:not(#ui) body .quick-extend-btn[aria-disabled="true"],
html:root:not(#ui) body .slug-btn:disabled,
html:root:not(#ui) body .slug-btn.disabled,
html:root:not(#ui) body .slug-btn[aria-disabled="true"],
html:root:not(#ui) body .profile-edit-btn:disabled,
html:root:not(#ui) body .profile-edit-btn.disabled,
html:root:not(#ui) body .profile-edit-btn[aria-disabled="true"],
html:root:not(#ui) body .aca-quick-btn:disabled,
html:root:not(#ui) body .aca-quick-btn.disabled,
html:root:not(#ui) body .aca-quick-btn[aria-disabled="true"],
html:root:not(#ui) body #copyEnrollmentLinkBtn:disabled,
html:root:not(#ui) body #copyEnrollmentLinkBtn.disabled,
html:root:not(#ui) body #copyEnrollmentLinkBtn[aria-disabled="true"],
html:root:not(#ui) body #electionAuditToggleBtn:disabled,
html:root:not(#ui) body #electionAuditToggleBtn.disabled,
html:root:not(#ui) body #electionAuditToggleBtn[aria-disabled="true"],
html:root:not(#ui) body .btn-primary:disabled,
html:root:not(#ui) body .btn-primary.disabled,
html:root:not(#ui) body .btn-primary[aria-disabled="true"],
html:root:not(#ui) body .btn-send:disabled,
html:root:not(#ui) body .btn-send.disabled,
html:root:not(#ui) body .btn-send[aria-disabled="true"],
html:root:not(#ui) body .btn-add:disabled,
html:root:not(#ui) body .btn-add.disabled,
html:root:not(#ui) body .btn-add[aria-disabled="true"],
html:root:not(#ui) body .btn-confirm:disabled,
html:root:not(#ui) body .btn-confirm.disabled,
html:root:not(#ui) body .btn-confirm[aria-disabled="true"],
html:root:not(#ui) body .btn-success:disabled,
html:root:not(#ui) body .btn-success.disabled,
html:root:not(#ui) body .btn-success[aria-disabled="true"],
html:root:not(#ui) body .btn-connect:disabled,
html:root:not(#ui) body .btn-connect.disabled,
html:root:not(#ui) body .btn-connect[aria-disabled="true"],
html:root:not(#ui) body .btn-generate:disabled,
html:root:not(#ui) body .btn-generate.disabled,
html:root:not(#ui) body .btn-generate[aria-disabled="true"],
html:root:not(#ui) body .btn-save-slug:disabled,
html:root:not(#ui) body .btn-save-slug.disabled,
html:root:not(#ui) body .btn-save-slug[aria-disabled="true"],
html:root:not(#ui) body .btn-upload:disabled,
html:root:not(#ui) body .btn-upload.disabled,
html:root:not(#ui) body .btn-upload[aria-disabled="true"],
html:root:not(#ui) body .controls-add:disabled,
html:root:not(#ui) body .controls-add.disabled,
html:root:not(#ui) body .controls-add[aria-disabled="true"],
html:root:not(#ui) body .confirm-btn:disabled,
html:root:not(#ui) body .confirm-btn.disabled,
html:root:not(#ui) body .confirm-btn[aria-disabled="true"],
html:root:not(#ui) body .upload-btn:disabled,
html:root:not(#ui) body .upload-btn.disabled,
html:root:not(#ui) body .upload-btn[aria-disabled="true"],
html:root:not(#ui) body .fix-issues-btn:disabled,
html:root:not(#ui) body .fix-issues-btn.disabled,
html:root:not(#ui) body .fix-issues-btn[aria-disabled="true"],
html:root:not(#ui) body .empty-state-btn:disabled,
html:root:not(#ui) body .empty-state-btn.disabled,
html:root:not(#ui) body .empty-state-btn[aria-disabled="true"],
html:root:not(#ui) body .send-email-submit:disabled,
html:root:not(#ui) body .send-email-submit.disabled,
html:root:not(#ui) body .send-email-submit[aria-disabled="true"],
html:root:not(#ui) body .modal-btn-save:disabled,
html:root:not(#ui) body .modal-btn-save.disabled,
html:root:not(#ui) body .modal-btn-save[aria-disabled="true"],
html:root:not(#ui) body .confirm-modal-confirm:disabled,
html:root:not(#ui) body .confirm-modal-confirm.disabled,
html:root:not(#ui) body .confirm-modal-confirm[aria-disabled="true"],
html:root:not(#ui) body .btn-brand:disabled,
html:root:not(#ui) body .btn-brand.disabled,
html:root:not(#ui) body .btn-brand[aria-disabled="true"],
html:root:not(#ui) body .election-add-btn:disabled,
html:root:not(#ui) body .election-add-btn.disabled,
html:root:not(#ui) body .election-add-btn[aria-disabled="true"],
html:root:not(#ui) body .nh-trigger-btn:disabled,
html:root:not(#ui) body .nh-trigger-btn.disabled,
html:root:not(#ui) body .nh-trigger-btn[aria-disabled="true"],
html:root:not(#ui) body .locations-empty-btn:disabled,
html:root:not(#ui) body .locations-empty-btn.disabled,
html:root:not(#ui) body .locations-empty-btn[aria-disabled="true"],
html:root:not(#ui) body .btn-enroll:disabled,
html:root:not(#ui) body .btn-enroll.disabled,
html:root:not(#ui) body .btn-enroll[aria-disabled="true"],
html:root:not(#ui) body .aca-btn-primary:disabled,
html:root:not(#ui) body .aca-btn-primary.disabled,
html:root:not(#ui) body .aca-btn-primary[aria-disabled="true"],
html:root:not(#ui) body .btn-add-note:disabled,
html:root:not(#ui) body .btn-add-note.disabled,
html:root:not(#ui) body .btn-add-note[aria-disabled="true"],
html:root:not(#ui) body .btn-add-comp:disabled,
html:root:not(#ui) body .btn-add-comp.disabled,
html:root:not(#ui) body .btn-add-comp[aria-disabled="true"],
html:root:not(#ui) body .dep-add-btn:disabled,
html:root:not(#ui) body .dep-add-btn.disabled,
html:root:not(#ui) body .dep-add-btn[aria-disabled="true"],
html:root:not(#ui) body .btn-danger:disabled,
html:root:not(#ui) body .btn-danger.disabled,
html:root:not(#ui) body .btn-danger[aria-disabled="true"],
html:root:not(#ui) body .btn-disconnect:disabled,
html:root:not(#ui) body .btn-disconnect.disabled,
html:root:not(#ui) body .btn-disconnect[aria-disabled="true"] {
  cursor: not-allowed !important;
  color: #94a3b8 !important;
  background-color: #f1f5f9 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px #e2e8f0 !important;
}

/* Keyboard focus: Mint's ring is an outline, so it survives the shadows above */
html:root:not(#ui) body .btn:focus-visible,
html:root:not(#ui) body .btn-primary:focus-visible,
html:root:not(#ui) body .btn-secondary:focus-visible,
html:root:not(#ui) body .btn-outline:focus-visible,
html:root:not(#ui) body .btn-danger:focus-visible,
html:root:not(#ui) body .btn-ghost:focus-visible,
html:root:not(#ui) body .back-btn:focus-visible,
html:root:not(#ui) body .btn-cancel:focus-visible,
html:root:not(#ui) body .btn-send:focus-visible,
html:root:not(#ui) body .controls-add:focus-visible,
html:root:not(#ui) body .empty-state-btn:focus-visible,
html:root:not(#ui) body .text-drops-btn:focus-visible,
html:root:not(#ui) body .upload-btn:focus-visible,
html:root:not(#ui) body .profile-edit-btn:focus-visible,
html:root:not(#ui) body .btn-enroll:focus-visible,
html:root:not(#ui) body .btn-export:focus-visible,
html:root:not(#ui) body .btn-add-note:focus-visible,
html:root:not(#ui) body .btn-add-comp:focus-visible,
html:root:not(#ui) body .dep-add-btn:focus-visible,
html:root:not(#ui) body .election-add-btn:focus-visible {
  outline: 2px solid var(--jb-brand) !important;
  outline-offset: 2px !important;
}

/* ==== Ported from the redesign's 91-john-square-table-headers.css ==== */
/* ---------- Preview (John): square table header corners ----------
   10-core.css rounds the top corners of every table's header row. Most tables sit
   under a card title (Compensation, Companies, Library, Emails, Employees, ...), so the
   header is a band across the middle of the card and the rounded ends look chipped.
   Mint's Original keeps these square. A table that opens its .table-container (COBRA)
   starts at the box's own rounded corner, so it keeps the rounding; the employee roster
   has its sort bar above the table, so it squares like the rest. */

html:root body main table:not(.cs-keep):not(.table-container > table:first-child) thead tr:first-child th:first-child { border-top-left-radius: 0 !important; }
html:root body main table:not(.cs-keep):not(.table-container > table:first-child) thead tr:first-child th:last-child { border-top-right-radius: 0 !important; }

/* ==== Ported from the redesign's 92-john-logo-hover.css ==== */
/* ---------- Preview (John): no hover tint on the navbar logo ----------
   10-core.css gives the topbar logo link a light teal background on hover. The logo
   stays as it is on hover, like Mint's Original. */

html:root body .topbar .logo:hover { background: transparent !important; }

/* ==== Ported from the redesign's 93-john-company-pagination.css ==== */
/* John: company page numbers are plain text, with a darker current page. */

html:root:not(#ui) body #employeesPagination .page-num {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
  font-weight: 500 !important;
}
html:root:not(#ui) body #employeesPagination .page-num.active {
  color: var(--cs-gray-700) !important;
  font-weight: 700 !important;
}
html:root:not(#ui) body #employeesPagination .page-num:not(.active):hover {
  color: var(--cs-gray-700) !important;
}

/* ==== Ported from the redesign's 94-john-tables.css ==== */
/* ---------- John: edge-to-edge tables ----------
   Companies, Enrollments and Library sit in a card with 24px padding, so the teal head band and the row rules
   stopped short of the card's edges and the band read as a square bar floating inside it. They run edge to edge;
   the cells' own 24px keeps the first column in line with the search field above. */

@media (min-width: 769px) {
  html:root:not(#ui) body .content > .companies-table > table.mint-records,
  html:root:not(#ui) body .content > .enrollments-table > table.mint-records,
  html:root:not(#ui) body .content .docs-list > table.mint-records {
    width: calc(100% + 48px) !important;
    max-width: none !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
  }
  /* The controls row above Enrollments and Library keeps Mint's bottom hairline; run it out with the band
     (it stopped 24px short on each side). The padding keeps the controls where they were. */
  html:root:not(#ui) body .content > .controls:has(+ .enrollments-table),
  html:root:not(#ui) body .content #tab-forms > .controls {
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ==== Ported from the redesign's 96-john-view-switch.css ==== */
/* ---------- John: List / Grid switch ----------
   10-core draws the switch as two 36px segments joined by a 4px track-coloured shadow, beside 44px controls, with
   Mint's filled grid glyph. It is a joined button pair at the controls' 44px instead: white with a hairline, the
   current view in light teal with a teal icon, and outline list and grid icons drawn here. */

html:root:not(#ui) body .view-toggle > button.view-btn {
  position: relative;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  background: var(--bg-primary) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cs-gray-500) !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
html:root:not(#ui) body .view-toggle > button.view-btn:first-child { border-radius: 12px 0 0 12px !important; }
html:root:not(#ui) body .view-toggle > button.view-btn + button.view-btn {
  margin-left: -1px !important;
  border-radius: 0 12px 12px 0 !important;
}
html:root:not(#ui) body .view-toggle > button.view-btn:not(.active):hover {
  background: var(--cs-gray-50) !important;
  color: var(--cs-gray-700) !important;
}
html:root:not(#ui) body .view-toggle > button.view-btn.active {
  z-index: 1;
  background: var(--cs-outline) !important;
  border-color: var(--cs-primary-light) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body .view-toggle > button.view-btn:focus-visible {
  z-index: 2;
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
}

/* The icons: Mint's art is hidden and an outline glyph is masked in the button's colour. */
html:root:not(#ui) body .view-toggle > button.view-btn i {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 0 !important;
}
html:root:not(#ui) body .view-toggle > button.view-btn i svg { display: none !important; }
html:root:not(#ui) body .view-toggle > button.view-btn i::before {
  content: "" !important;
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--jv-icon) center / contain no-repeat;
  mask: var(--jv-icon) center / contain no-repeat;
}
html:root:not(#ui) body .view-toggle > button.view-btn[data-view="list"] {
  --jv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01' stroke-width='3'/%3E%3C/svg%3E");
}
html:root:not(#ui) body .view-toggle > button.view-btn[data-view="grid"] {
  --jv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body .view-toggle > button.view-btn { transition: none !important; }
}

/* ==== Ported from the redesign's 97-john-table-heads.css ==== */
/* ---------- John: light gray table heads ----------
   10-core's teal band on every table head was jarring. Heads are a light gray strip with darker labels a step
   smaller and a hairline under them. */

@media (min-width: 769px) {
  html:root:not(#ui) body main table:not(.cs-keep) thead th,
  html:root:not(#ui) body .data-table th,
  html:root:not(#ui) body .plans-table th,
  html:root:not(#ui) body .docs-table th {
    background: var(--cs-gray-50) !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--cs-border) !important;
  }
  html:root:not(#ui) body main table:not(.cs-keep) thead th button,
  html:root:not(#ui) body main table:not(.cs-keep) thead th a,
  html:root:not(#ui) body main table:not(.cs-keep) thead th span:not(.col-filter-dropdown *),
  html:root:not(#ui) body main table:not(.cs-keep) thead th div:not(.col-filter-dropdown):not(.col-filter-dropdown *) {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
}

/* ==== Ported from the redesign's 99-john-benefit-setup-flows.css ==== */
/* Benefit setup keeps Mint's page-based review and native extraction controls.
   The setup forms and rate tables share the established field and action rhythm. */
html:root:not(#ui) body[data-broker-page="company"] #planWizardModal input::placeholder,
html:root:not(#ui) body[data-broker-page="company"] #dataModalBody input::placeholder,
html:root:not(#ui) body[data-broker-page="plans"] #wizardSection input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

/* The browser retains selection and keyboard behavior for ordinary setup selects. */
@supports (appearance: base-select) {
  html:root:not(#ui) body[data-broker-page="company"] #planLibraryTypeFilter,
  html:root:not(#ui) body[data-broker-page="company"] #dataModalBody select,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection select {
    appearance: base-select !important;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-image: none !important;
    padding-inline: 12px !important;
  }
  html:root:not(#ui) body[data-broker-page="company"] #planLibraryTypeFilter::picker(select),
  html:root:not(#ui) body[data-broker-page="company"] #dataModalBody select::picker(select),
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection select::picker(select) {
    appearance: base-select !important;
    max-height: min(360px, 60dvh);
    margin-block: 6px;
    padding: 4px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    background: var(--bg-primary);
    color: var(--cs-gray-700);
    box-shadow: var(--cs-shadow-md);
  }
  html:root:not(#ui) body[data-broker-page="company"] #planLibraryTypeFilter option,
  html:root:not(#ui) body[data-broker-page="company"] #dataModalBody select option,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection select option {
    position: relative;
    min-height: 44px;
    padding: 10px 36px 10px 12px;
    border-radius: calc(var(--cs-radius-md) / 2);
    color: var(--cs-gray-700);
    font-size: max(14px, .875rem);
    line-height: 22px;
    white-space: normal;
  }
  html:root:not(#ui) body[data-broker-page="company"] #planLibraryTypeFilter::picker-icon,
  html:root:not(#ui) body[data-broker-page="company"] #dataModalBody select::picker-icon,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection select::picker-icon {
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-left: auto;
    background: var(--cs-gray-500);
    mask: url("/icons/mint-v3/chevron-down.svg") center / contain no-repeat;
  }
  html:root:not(#ui) body[data-broker-page="company"] #planLibraryTypeFilter option:checked,
  html:root:not(#ui) body[data-broker-page="company"] #dataModalBody select option:checked,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection select option:checked {
    background: var(--cs-gray-100);
    color: var(--cs-primary-deep);
    font-weight: 600;
  }
  html:root:not(#ui) body[data-broker-page="company"] #planLibraryTypeFilter option::checkmark,
  html:root:not(#ui) body[data-broker-page="company"] #dataModalBody select option::checkmark,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection select option::checkmark {
    content: "";
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    background: var(--cs-primary-deep);
    mask: url("/icons/mint-v3/check.svg") center / contain no-repeat;
  }
}

@media (max-width: 767px) {
  html:root:not(#ui) body[data-broker-page="company"] #planWizardModal .wizard-form-grid,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  html:root:not(#ui) body[data-broker-page="company"] #planWizardModal .wizard-form-grid > *,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection .form-grid > * {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }
  html:root:not(#ui) body[data-broker-page="company"] #planWizardModal .wizard-form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  html:root:not(#ui) body[data-broker-page="company"] #planWizardModal .nh-select-trigger,
  html:root:not(#ui) body[data-broker-page="plans"] #wizardSection .form-input {
    font-size: max(16px, 1rem) !important;
  }
}

/* ==== Ported from the redesign's 99-john-broker-avatar.css ==== */
/* John: a rounded-square identity when the broker has not uploaded a photo.
   Illustrator source: docs/artwork/john-role-avatars. Photos and loading retain Mint's behavior. */

html:root:not(#ui) body[data-broker-page] .navbar-user-avatar:not(.loading):not(:has(img)) {
  width: 36px !important;
  height: 36px !important;
  flex: none;
  border-radius: var(--cs-radius-md) !important;
  border: 0 !important;
  background: var(--cs-slate-100) !important;
  color: var(--cs-primary-deep) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  transition: background-color 140ms ease;
}

html:root:not(#ui) body[data-broker-page] .navbar-user-avatar:not(.loading):not(:has(img)) > i {
  display: none !important;
}

html:root:not(#ui) body[data-broker-page] .navbar-user-avatar:not(.loading):not(:has(img))::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.8.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%209.03%20Build%200)%20%20--%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__broker__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2212%22%20cy%3D%227.25%22%20r%3D%223.5%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M4.5%2C19.5c0-3.2%2C2.2-5.1%2C5-5.8l2.5%2C3.8l2.5-3.8c2.8%2C0.7%2C5%2C2.6%2C5%2C5.8c0%2C0.9-0.6%2C1.5-1.5%2C1.5H6%0D%0A%09C5.1%2C21%2C4.5%2C20.4%2C4.5%2C19.5z%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M12%2C13.5l-1.1%2C1.2l1.1%2C1.7l1.1-1.7L12%2C13.5z%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A") center / contain no-repeat;
}

html:root:not(#ui) body[data-broker-page] .user-menu-btn:hover .navbar-user-avatar:not(.loading):not(:has(img)),
html:root:not(#ui) body[data-broker-page] .user-menu-btn:focus-visible .navbar-user-avatar:not(.loading):not(:has(img)) {
  background: var(--cs-outline) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page] .navbar-user-avatar:not(.loading):not(:has(img)) {
    transition: none;
  }
}

/* ==== Ported from the redesign's 99-john-communications-flows.css ==== */
/* John: finish the remaining communication drawers, pickers and review steps.
   Keep native flows and preview content, with readable labels and reachable native inputs. */
html:root:not(#ui) body[data-broker-page="onboarding"] .wrap > a.btn-ghost[href="/broker/dashboard"],
html:root:not(#ui) body[data-broker-page="onboarding"] .wrap > .page-subtitle,
html:root:not(#ui) body[data-broker-page="company"] #tab-newhires .nh-subtitle {
  color: var(--cs-gray-600) !important;
}

/* ==== Ported from the redesign's 99-john-company-benefits.css ==== */
/* John: carry the paid-team Mint table and form rhythm through Company Benefits.
   Keep the existing tabs, category artwork, status meanings and action handlers.
   Dialogs belong to 99-john-benefit-dialogs.css; these rules only style page content. */
html:root:not(#ui) body[data-broker-page="company"] #plansTable .plan-name-cell,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .plan-name-cell {
  gap: 12px;
}

/* Category remains recognizable by its existing icon, with the same tile as Plan detail. */
html:root:not(#ui) body[data-broker-page="company"] #plansTable .plan-type-icon,
html:root:not(#ui) body[data-broker-page="company"] #extractedPlansTable .plan-type-icon,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .plan-icon,
html:root:not(#ui) body[data-broker-page="plans"] #needsReviewContainer .plan-icon,
html:root:not(#ui) body[data-broker-page="plans"] #assignedPlansContainer .assigned-plan-icon {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: var(--cs-slate-100) !important;
  color: var(--cs-primary-deep) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

/* Status text and semantic colour carry the meaning; a second dot adds no information. */
html:root:not(#ui) body[data-broker-page="company"] #plansTable .plan-status,
html:root:not(#ui) body[data-broker-page="company"] #extractedPlansTable .plan-status,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .status-badge,
html:root:not(#ui) body[data-broker-page="plans"] #needsReviewContainer .status-badge {
  min-height: 24px;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  text-transform: capitalize;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .plan-status.active,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .status-badge.active {
  background: var(--cs-ok-bg) !important;
  color: var(--cs-ok-fg) !important;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .plan-status.needs-review,
html:root:not(#ui) body[data-broker-page="company"] #extractedPlansTable .plan-status.needs-review,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .status-badge.pending,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .status-badge.needs-review,
html:root:not(#ui) body[data-broker-page="plans"] #needsReviewContainer .status-badge.needs-review {
  background: var(--cs-warn-bg) !important;
  color: var(--cs-warn-fg) !important;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .plan-status.draft,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .status-badge.draft {
  background: var(--cs-gray-100) !important;
  color: var(--text-secondary) !important;
}

/* Quiet, evenly spaced tools remain secondary to the plan name. */
html:root:not(#ui) body[data-broker-page="company"] #plansTable .table-actions,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .action-buttons {
  display: flex;
  gap: 4px !important;
  align-items: center;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .location-action-btn,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .action-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  flex: 0 0 36px;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .location-action-btn:not(:disabled):hover,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .action-btn:not(:disabled):hover {
  background: var(--cs-slate-100) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .location-action-btn.delete,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .action-btn.delete {
  color: var(--cs-bad-strong) !important;
}
html:root:not(#ui) body[data-broker-page="company"] #plansTable .location-action-btn.delete:hover,
html:root:not(#ui) body[data-broker-page="plans"] #plansTableContainer .action-btn.delete:hover {
  background: var(--cs-bad-bg) !important;
  color: var(--cs-bad-fg) !important;
}

/* ==== Ported from the redesign's 99-john-company-identity.css ==== */
/* John: an Illustrator-drawn company identity replaces the indistinct fallback tile.
   Only the no-logo state changes; uploaded company logos retain their own artwork. */

html:root:not(#ui) body[data-broker-page="company"] #companyIcon:not(.has-logo):not(:has(img)),
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-icon:not(:has(img)),
html:root:not(#ui) body[data-broker-page="companies"] #companiesTable .company-icon:not(:has(img)),
html:root:not(#ui) body[data-broker-page="enrollments"] .company-icon:not(:has(img)),
html:root:not(#ui) body[data-broker-page="companies"] #companiesGrid .card-company-logo:not(:has(img)),
html:root:not(#ui) body[data-broker-page] .navbar-search-result-avatar.company:not(:has(img)),
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo:has(> i.fa-building):not(:has(img)),
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card .company-logo:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cs-slate-100) !important;
  border: 0 !important;
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
  color: var(--cs-primary-deep) !important;
  font-size: 0 !important;
}
html:root:not(#ui) body[data-broker-page="company"] #companyIcon:not(.has-logo):not(:has(img)) > i,
html:root:not(#ui) body[data-broker-page="companies"] #companiesTable .company-icon:not(:has(img)) > i,
html:root:not(#ui) body[data-broker-page="enrollments"] .company-icon:not(:has(img)) > i,
html:root:not(#ui) body[data-broker-page="companies"] #companiesGrid .card-company-logo:not(:has(img)) > i,
html:root:not(#ui) body[data-broker-page] .navbar-search-result-avatar.company:not(:has(img)) > i,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo:not(:has(img)) > i.fa-building,
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card .company-logo:not(:has(img)) > i {
  display: none !important;
}
html:root:not(#ui) body[data-broker-page="company"] #companyIcon:not(.has-logo):not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-icon:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="companies"] #companiesTable .company-icon:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="enrollments"] .company-icon:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="companies"] #companiesGrid .card-company-logo:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page] .navbar-search-result-avatar.company:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo:has(> i.fa-building):not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="dashboard"] .company-card .company-logo:not(:has(img))::before {
  content: "";
  display: block;
  width: min(28px, 75%);
  height: min(28px, 75%);
  background: var(--cs-primary-deep);
  mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Mint__x2F__company_identity__x2F__24px%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolyline%20id%3D%22Primary_building%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%094.5%2C20.5%204.5%2C5%205.5%2C4%2014.5%2C4%2015.5%2C5%2015.5%2C20.5%20%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Side_wing%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%0915.5%2C10%2019.5%2C10%2020.5%2C11%2020.5%2C20.5%20%22%2F%3E%0D%0A%3Cline%20id%3D%22Ground%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%223%22%20y1%3D%2220.5%22%20x2%3D%2222%22%20y2%3D%2220.5%22%2F%3E%0D%0A%3Cpolyline%20id%3D%22Entrance%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20points%3D%22%0D%0A%098.5%2C20.5%208.5%2C16%2011.5%2C16%2011.5%2C20.5%20%22%2F%3E%0D%0A%3Cline%20id%3D%22Upper_left_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%228%22%20y1%3D%228%22%20x2%3D%228%22%20y2%3D%229%22%2F%3E%0D%0A%3Cline%20id%3D%22Upper_right_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%229%22%2F%3E%0D%0A%3Cline%20id%3D%22Lower_left_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%228%22%20y2%3D%2213%22%2F%3E%0D%0A%3Cline%20id%3D%22Lower_right_window%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2212%22%20y1%3D%2212%22%20x2%3D%2212%22%20y2%3D%2213%22%2F%3E%0D%0A%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Dense rows retain their native tile size, with a legible outline building. */
html:root:not(#ui) body[data-broker-page="companies"] #companiesTable .company-icon:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="enrollments"] .company-icon:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-icon:not(:has(img))::before,
html:root:not(#ui) body[data-broker-page] .navbar-search-result-avatar.company:not(:has(img))::before {
  width: 24px;
  height: 24px;
}

/* ==== Ported from the redesign's 99-john-company-switcher.css ==== */
/* John: company context uses the same 44px control and compact menu rhythm as
   Library filters. One line removes the redundant label above the current name. */

html:root:not(#ui) body[data-broker-page] .company-switcher-btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  gap: 10px;
  width: 220px;
  max-width: 100%;
  min-width: 0 !important;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-name,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option-name {
  color: var(--cs-gray-700);
  font-size: 14px !important;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo:has(> i.fa-building) {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  background: var(--cs-slate-100) !important;
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo > img {
  object-fit: contain;
  background: var(--bg-primary);
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo::before,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-logo:has(> i.fa-building)::before {
  width: 18px;
  height: 18px;
}
html:root:not(#ui) body[data-broker-page] #companySwitcherDropdown {
  left: auto;
  right: 0;
  width: 284px;
  max-width: calc(100vw - 32px);
  padding: 4px;
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-md);
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
html:root:not(#ui) body[data-broker-page] #companySwitcherDropdown.open {
  transform: none;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-search-wrap {
  padding: 4px 4px 8px;
  border-bottom: 0;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-search-wrap > i {
  left: 16px;
  margin-top: -2px;
  color: var(--cs-gray-500);
}
html:root:not(#ui) body[data-broker-page] #switcherSearch {
  height: 44px !important;
  padding: 0 12px 0 34px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 4px !important;
  background: var(--bg-primary) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page] #switcherSearch:focus {
  border-color: var(--cs-primary) !important;
  outline: none !important;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  gap: 10px;
  border-radius: 4px;
  background: transparent;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option:hover,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option.active {
  background: var(--cs-gray-100);
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option.active .switcher-option-name,
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option.active > i {
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body[data-broker-page] .company-switcher .switcher-option:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: -2px !important;
}
@media (max-width: 860px) {
  html:root:not(#ui) body[data-broker-page] #companySwitcherDropdown {
    left: 0;
    right: auto;
  }
}
@media (max-width: 767px) {
  html:root:not(#ui) body[data-broker-page] .company-switcher-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page] #companySwitcherDropdown {
    transition: none;
    transform: none;
  }
}

/* ==== Ported from the redesign's 99-john-dialog-chrome.css ==== */
/* John: floating workspace tools must not cover dialog controls on smaller screens.
   The shared focus controller owns this state for the native overlay variants. */

html:root.cs-dialog-open #chatAiBtn,
html:root.cs-dialog-open .mint-totop {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==== Ported from the redesign's 99-john-empty-artwork.css ==== */
/* John: company empty states use the same quiet paper-and-row language as Library.
   Remove the floating shadows and accent badges; the real action keeps the teal. */

html:root:not(#ui) body[data-broker-page] .mv {
  animation: none !important;
}
html:root:not(#ui) body[data-broker-page] .mv::after {
  display: none;
}
html:root:not(#ui) body[data-broker-page] .mv * {
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page] .mv-plan .tile,
html:root:not(#ui) body[data-broker-page] .mv-place .pin,
html:root:not(#ui) body[data-broker-page] .mv-people .a2,
html:root:not(#ui) body[data-broker-page] .mv-cobra .clk,
html:root:not(#ui) body[data-broker-page] .mv-flow .root,
html:root:not(#ui) body[data-broker-page] .mv-invite .send,
html:root:not(#ui) body[data-broker-page] .mv-family .a1,
html:root:not(#ui) body[data-broker-page] .mv-split .t1 > i {
  background: var(--cs-gray-200) !important;
  border-color: var(--cs-gray-200) !important;
}

/* Grouped rows remain distinct from a document. Only the decorative accent is removed. */
html:root:not(#ui) body[data-broker-page] .mv-group .br {
  border-color: var(--cs-gray-200);
  border-width: 1px;
  border-radius: 4px 0 0 4px;
}
html:root:not(#ui) body[data-broker-page] .mv-group .br::after {
  display: none;
}
html:root:not(#ui) body[data-broker-page] .mv-group .t {
  border-radius: 4px;
  border-color: var(--cs-gray-200);
  background: var(--bg-primary);
}
html:root:not(#ui) body[data-broker-page] .mv-group .t::after {
  background: color-mix(in srgb, var(--cs-gray-200) 65%, var(--bg-primary));
}

/* One upright sheet identifies Documents without pretending an upload has happened. */
html:root:not(#ui) body[data-broker-page] .mv-doc .up,
html:root:not(#ui) body[data-broker-page] .mv-doc .p2,
html:root:not(#ui) body[data-broker-page] .mv-doc .p3 {
  display: none;
}
html:root:not(#ui) body[data-broker-page] .mv-doc .p {
  transform: none;
  border-radius: 6px;
  border-color: var(--cs-gray-200);
  background: var(--bg-primary);
}
html:root:not(#ui) body[data-broker-page] .mv-doc .p1::before {
  border-width: 0 15px 15px 0;
  border-color: var(--bg-primary) var(--bg-primary) var(--cs-gray-100) var(--cs-gray-100);
}
html:root:not(#ui) body[data-broker-page] .mv-doc .t {
  background: color-mix(in srgb, var(--cs-gray-200) 65%, var(--bg-primary));
}

/* Keep the prompt readable, with color feedback confined to its actual upload target. */
html:root:not(#ui) body[data-broker-page] #companyDocsEmpty .docs-upload-cta > p {
  color: var(--cs-gray-700) !important;
  transition: color 140ms ease;
}
html:root:not(#ui) body[data-broker-page] #companyDocsEmpty .docs-upload-cta:hover > p {
  color: var(--cs-primary-deep) !important;
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page] #companyDocsEmpty .docs-upload-cta > p {
    transition: none;
  }
}

/* ==== Ported from the redesign's 99-john-empty-states.css ==== */
/* ---------- Preview (John): purposeful broker empty states ----------
   Mint's Original CSS drawings, with a measured reading rhythm and quiet repeated actions.
   Original artwork and review notes: docs/artwork/john-empty-states/README.md. */

html:root:not(#ui) body[data-broker-page] .has-ghost:has(> h3),
html:root:not(#ui) body[data-broker-page] .has-ghost:has(> .mv),
html:root:not(#ui) body[data-broker-page] .locations-empty-state:has(> .mv),
html:root:not(#ui) body[data-broker-page] .employees-empty-state:has(> .mv),
html:root:not(#ui) body[data-broker-page] .docs-empty:has(.mv),
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div {
  padding: 40px 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  color: var(--cs-gray-700) !important;
}

/* Restore the Original drawings; reserve space below them, not inside their geometry. */
html:root:not(#ui) body[data-broker-page] .has-ghost .mg {
  width: 232px;
  max-width: 100%;
  margin: 0 auto 24px !important;
}

/* Shared card styles must not turn the small drawings into application cards. */
html:root:not(#ui) body[data-broker-page] .has-ghost .mg > .card {
  min-height: 0 !important;
  height: auto !important;
  padding: 11px 12px !important;
  margin-block: 0 !important;
  box-shadow: none !important;
}

html:root:not(#ui) body[data-broker-page] .has-ghost > .mv,
html:root:not(#ui) body[data-broker-page] .locations-empty-state > .mv,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > .mv,
html:root:not(#ui) body[data-broker-page] .docs-empty .mv,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > .mv {
  margin: 0 auto 24px !important;
}

html:root:not(#ui) body[data-broker-page] .templates-empty-img:has(.mg) {
  margin-bottom: 0 !important;
}

/* A failed search is a short message, not an illustration of an empty account. */
html:root:not(#ui) body[data-broker-page] .has-ghost:has(.fa-search) .empty-state-icon,
html:root:not(#ui) body[data-broker-page] [id=tab-employees]:has(#employeeSearch:not(:placeholder-shown)) .employees-empty-state > .mv,
html:root:not(#ui) body[data-broker-page]:has(#searchInput:not(:placeholder-shown)) .has-ghost > .mg {
  display: none !important;
}

html:root:not(#ui) body[data-broker-page] .has-ghost > h3,
html:root:not(#ui) body[data-broker-page] .cobra-empty > .cobra-empty-text,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > p:first-of-type,
html:root:not(#ui) body[data-broker-page] .locations-empty-state > .locations-empty-title,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > .employees-empty-title,
html:root:not(#ui) body[data-broker-page] .docs-empty > p,
html:root:not(#ui) body[data-broker-page] .docs-upload-cta > p,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > h3,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > h3 {
  margin: 0 auto 8px !important;
  max-width: 36ch;
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: var(--cs-gray-700) !important;
  text-wrap: balance;
}

html:root:not(#ui) body[data-broker-page] .has-ghost > h3 + p,
html:root:not(#ui) body[data-broker-page] .cobra-empty > .cobra-empty-sub,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > p + p,
html:root:not(#ui) body[data-broker-page] .locations-empty-state > .locations-empty-subtitle,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > .employees-empty-subtitle,
html:root:not(#ui) body[data-broker-page] .docs-empty > small,
html:root:not(#ui) body[data-broker-page] .docs-upload-cta > small,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > p,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > p {
  display: block;
  max-width: 42ch !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  color: color-mix(in srgb, var(--cs-gray-500) 88%, var(--cs-gray-700)) !important;
  text-wrap: balance;
}

html:root:not(#ui) body[data-broker-page] .has-ghost > button,
html:root:not(#ui) body[data-broker-page] .locations-empty-state > button,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > button,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label {
  margin-top: 16px !important;
  min-height: 44px !important;
}

/* The toolbar is the primary route; repeated in-context actions read as links. */
html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button,
html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button,
html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button,
html:root:not(#ui) body[data-broker-page] #locationsEmpty > button,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > button,
html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > button,
html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button,
html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button {
  height: auto !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--cs-primary-deep) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 600 !important;
  text-decoration: none;
  text-underline-offset: 4px;
  transform: none !important;
  transition: transform 140ms cubic-bezier(.2, .7, .3, 1), color 140ms ease !important;
}

html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button:hover,
html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button:active,
html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button:hover,
html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button:active,
html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button:hover,
html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button:active,
html:root:not(#ui) body[data-broker-page] #locationsEmpty > button:hover,
html:root:not(#ui) body[data-broker-page] #locationsEmpty > button:active,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label:hover,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label:active,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > button:hover,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > button:active,
html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button:hover,
html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button:active,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label:hover,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label:active,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > button:hover,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > button:active,
html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button:hover,
html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button:active,
html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button:hover,
html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button:active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--cs-tertiary) !important;
  text-decoration: none !important;
  transform: scale(1.025) !important;
}

html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #locationsEmpty > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label:focus-visible,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label:focus-visible,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button:focus-visible,
html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button:focus-visible {
  outline: 2px solid var(--cs-primary) !important;
  outline-offset: 2px !important;
  transition: none !important;
}

html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button > i,
html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button > i,
html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button > i,
html:root:not(#ui) body[data-broker-page] #locationsEmpty > button > i,
html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label > i,
html:root:not(#ui) body[data-broker-page] .employees-empty-state > button > i,
html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button > i,
html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label > i,
html:root:not(#ui) body[data-broker-page] .nh-empty-state > button > i,
html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button > i,
html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button > i {
  display: none !important;
}

/* Company upload keeps its native file-picker target without a second bordered card. */
html:root:not(#ui) body[data-broker-page] .docs-empty .docs-upload-cta {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html:root:not(#ui) body[data-broker-page] .docs-empty .docs-upload-cta > p {
  color: var(--cs-primary-deep) !important;
}

html:root:not(#ui) body[data-broker-page] .docs-empty .docs-upload-cta:hover > p {
  color: var(--cs-tertiary) !important;
  text-decoration: none !important;
}

/* Dashboard slots keep their existing compact vertical rhythm. */
html:root:not(#ui) body[data-broker-page] .empty-enrollments.has-ghost,
html:root:not(#ui) body[data-broker-page] .empty-companies.has-ghost {
  padding-block: 32px !important;
}

/* An empty COBRA table must fit its viewport before it has columns to scroll. */
@media (max-width: 768px) {
  html:root:not(#ui) body[data-broker-page] #tab-cobra .table-container:has(.cobra-empty) table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  html:root:not(#ui) body[data-broker-page] #tab-cobra .table-container:has(.cobra-empty) thead {
    display: none !important;
  }
}

@media (max-width: 480px) {
  html:root:not(#ui) body[data-broker-page] .has-ghost:has(> h3),
  html:root:not(#ui) body[data-broker-page] .has-ghost:has(> .mv),
  html:root:not(#ui) body[data-broker-page] .locations-empty-state:has(> .mv),
  html:root:not(#ui) body[data-broker-page] .employees-empty-state:has(> .mv),
  html:root:not(#ui) body[data-broker-page] .docs-empty:has(.mv),
  html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty,
  html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div {
    padding: 32px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button,
  html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button,
  html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button,
  html:root:not(#ui) body[data-broker-page] #locationsEmpty > button,
  html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label,
  html:root:not(#ui) body[data-broker-page] .employees-empty-state > button,
  html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button,
  html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label,
  html:root:not(#ui) body[data-broker-page] .nh-empty-state > button,
  html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button,
  html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button {
    transition: none !important;
  }

  html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button:hover,
  html:root:not(#ui) body[data-broker-page] #formsEmpty > .has-ghost > button:active,
  html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button:hover,
  html:root:not(#ui) body[data-broker-page] #packetsEmpty > .has-ghost > button:active,
  html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button:hover,
  html:root:not(#ui) body[data-broker-page] #jobClassesEmpty > button:active,
  html:root:not(#ui) body[data-broker-page] #locationsEmpty > button:hover,
  html:root:not(#ui) body[data-broker-page] #locationsEmpty > button:active,
  html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label:hover,
  html:root:not(#ui) body[data-broker-page] #libraryDocsEmpty > label:active,
  html:root:not(#ui) body[data-broker-page] .employees-empty-state > button:hover,
  html:root:not(#ui) body[data-broker-page] .employees-empty-state > button:active,
  html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button:hover,
  html:root:not(#ui) body[data-broker-page] #plansTableContainer > .has-ghost > button:active,
  html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label:hover,
  html:root:not(#ui) body[data-broker-page] #agencyDocsEmpty > div > label:active,
  html:root:not(#ui) body[data-broker-page] .nh-empty-state > button:hover,
  html:root:not(#ui) body[data-broker-page] .nh-empty-state > button:active,
  html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button:hover,
  html:root:not(#ui) body[data-broker-page] #companiesBody .has-ghost > button:active,
  html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button:hover,
  html:root:not(#ui) body[data-broker-page] #companiesGrid > .has-ghost > button:active {
    transform: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-enrollment-brand.css ==== */
/* ---------- John: enrollment pages follow the employer's colour everywhere ----------
   Mint gives each employer its own colour on enrollment (--primary). The Clone's shared rules still drew some
   things in Mint teal (--cs-primary), most visibly the focus outline on every field, so a blue employer got blue
   buttons and teal fields. On enrollment pages the Clone's teal tokens now point at the employer's colour. */

html:root[data-cs-enrollment-page]:not(#ui) body {
  --cs-primary: var(--primary);
  --cs-primary-hover: var(--primary-hover, color-mix(in srgb, var(--primary) 85%, #000));
  --cs-primary-deep: color-mix(in srgb, var(--primary) 75%, #000);
  --cs-primary-light: color-mix(in srgb, var(--primary) 45%, #fff);
  --cs-primary-lighter: color-mix(in srgb, var(--primary) 28%, #fff);
  --cs-primary-lightest: color-mix(in srgb, var(--primary) 5%, transparent);
  --cs-primary-tint: color-mix(in srgb, var(--primary) 10%, transparent);
  --cs-ring: color-mix(in srgb, var(--primary) 25%, transparent);
}

/* The first loading spinner turns before the employer is known, so it cannot wear their colour without flashing
   Mint teal first. It stays neutral: a light grey arc on the pale ring. (Mint asks for --gray-400, which this page
   never defines, so the arc fell back to near-black text colour.) */
html:root[data-cs-enrollment-page]:not(#ui) body #loadingOverlay .spinner {
  border-top-color: var(--cs-gray-400) !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-confirm.css ==== */
/* ---------- John: the remove confirmation ----------
   Removing a dependent, a beneficiary or a benefit asks first. The window is flat: one white card with its depth
   from a soft shadow, no border, no dividers and no close box (Cancel and Escape close it). The title names what is
   being removed and one line says what that means (the wizard's own script words it for dependents and beneficiaries). Cancel
   is a quiet grey button; Remove is red, as Mint intended (the Clone had turned it the company colour). For "Remove
   protection?", Mint makes removing the quiet choice, so there Keep it leads in the company colour.
   A large, faint exclamation mark (the deadline strip's tapered one, in its amber) sits in the top right corner,
   cropped by the card, and rises in a beat after the card; the words stay clear of it. Removing a plan shows the
   benefit's own icon there instead (the tab's art, tilted, in a light tint of the tabs' green), set in far enough
   that its shape reads with only its right edge cut by the card, beside the words and above the buttons. While the question is open
   the page behind cannot scroll, and its scrollbar's space is kept so nothing shifts. */
html:root[data-cs-enrollment-page]:not(#ui):has(#confirmationModal.visible) {
  overflow: hidden !important;
  scrollbar-gutter: stable;
}

/* ==== Ported from the redesign's 99-john-enrollment-corners.css ==== */
/* ---------- John: one set of corners ----------
   Corners were a scatter (4, 8, 10, 12, 14, 16, 20px), and things inside a card were rounder than the card itself
   (8px cards holding 14px rows and form panels, a 12px prompt, a 10px coverage row): the inner corner bulging
   past the outer one is what makes a layout look generated. Now there are three sizes, by level:
     12px  cards on the page (and the lists that drop over them)
      8px  anything inside a card: rows, panels, strips, the dashed Add buttons, chips (and fields, already 8px)
     16px  dialogs only
   So nothing nested is ever rounder than what holds it. */

/* Cards on the page: 12px. */
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .ef-form-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .coverage-header-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .benefit-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .cart-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body #coverageSelector,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body #stage-review-cart > .stage-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body #stage-sign > .stage-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .step-card,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .task-item,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .form-panel {
  border-radius: 12px !important;
}

/* Inside a card: 8px. */
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .ef-dependent-item,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .ef-beneficiary-form,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .ef-add-dependent-btn,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .advisor-prompt,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .plan-tier-row,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .cost-breakdown,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .sc-info-panel,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body .urgency-strip,
html:root[data-cs-enrollment-page]:not(#ui):not(#ui) body #beneficiaryFormWrap .cs-ben-person {
  border-radius: 8px !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-dividers.css ==== */
/* ---------- John: fewer divider lines in enrollment ----------
   A rule under every card title and between every section made the pages look templated. Space separates them
   now. Kept on purpose: the line above a total (Your cost, Total, the review total), the W-4 signature line, and
   the page shell (top bar, step list, chat). */

/* Card titles: Personal Information, Physical Address, People You're Covering, Beneficiaries. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-form-card-title {
  border-bottom-color: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 20px !important;
}

/* Section breaks: above Back / Continue, the plan card's Recommended strip, the summary's button, and the review card. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-actions,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .cart-cta,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .review-summary {
  border-top-color: transparent !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .recommended-bar,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .review-header,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #reviewEmployerHero {
  border-bottom-color: transparent !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-flat.css ==== */
/* ---------- John: flat cards ----------
   Every card in enrollment (the Profile and Dependents forms, the coverage header, the plan cards, the cart and
   Who's Covered beside them, the review list and its summary) floated on a soft shadow. They now sit flat, white on
   the grey page, with nothing under them. The one exception is the recommended plan, which keeps its lift
   (99-john-enrollment-no-outlines.css draws that on its own) so the only raised thing on the page is the plan we
   point people to. Things that really float over the page keep their shadows: menus, the state list, dialogs,
   tooltips, the chat window and the help button.

   Both card shadows come from two shared values (99-john-enrollment-surfaces.css and
   99-john-enrollment-no-outlines.css set them); this sets them to nothing, outranking both. */

html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui):not(#ui) {
  --jx-layer: none;
  --jx-layer-raised: none;
}

/* ==== Ported from the redesign's 99-john-enrollment-flows.css ==== */
/* John: carry Mint's quiet form surfaces into enrollment and new-hire paperwork.
   Preserve native steps, employer branding, required fields and document content. */

/* Reuse the paid-team button material while retaining the employer's native brand token. */
html:root:not(#ui) body:has(#efTopNav),
html:root:not(#ui) body:has(#stepContainer),
html:root:not(#ui) body:has(#form-i9) {
  --jb-brand: var(--primary);
  --jb-radius: var(--cs-radius-md);
  --jb-primary-image: none;
  --jb-primary-shadow: var(--cs-shadow-xs);
  --jb-primary-hover-image: none;
  --jb-primary-hover-fill: var(--primary-hover);
  --jb-primary-hover-shadow: var(--cs-shadow-xs);
  --jb-primary-press-shadow: none;
  --jb-secondary-image: none;
  --jb-secondary-shadow: inset 0 0 0 1px var(--cs-border);
  --jb-secondary-hover-image: none;
  --jb-secondary-hover-fill: var(--cs-gray-50);
  --jb-secondary-hover-shadow: inset 0 0 0 1px var(--cs-gray-400);
  --jb-secondary-press-shadow: inset 0 0 0 1px var(--cs-gray-400);
}

/* These are the existing first-level panels, without the shared raised-card treatment. */
html:root:not(#ui) body:has(#efTopNav) .coverage-header-card,
html:root:not(#ui) body:has(#efTopNav) .benefit-card,
html:root:not(#ui) body:has(#efTopNav) .cart-card,
html:root:not(#ui) body:has(#efTopNav) #stage-review-cart > .stage-card,
html:root:not(#ui) body:has(#efTopNav) #stage-sign > .stage-card,
html:root:not(#ui) body:has(#stepContainer) .step-card,
html:root:not(#ui) body:has(#stepContainer) .dd-account-card,
html:root:not(#ui) body:has(#stepContainer) .ob-checkbox-card {
  border-radius: var(--cs-radius-md) !important;
  box-shadow: none !important;
}
html:root:not(#ui) body:has(#efTopNav) .benefit-card.selected,
html:root:not(#ui) body:has(#stepContainer) .ob-checkbox-card.checked:not(.error) {
  border-color: var(--primary) !important;
}

/* Standard fields keep their native validation and company-color focus feedback. */
html:root:not(#ui) body:has(#efTopNav) .modal-body input.form-input,
html:root:not(#ui) body:has(#efTopNav) .modal-body select.form-input,
html:root:not(#ui) body:has(#stepContainer) input.form-input,
html:root:not(#ui) body:has(#stepContainer) select.form-input {
  height: 44px;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--cs-radius-md) !important;
}

/* Small row tools and disclosure controls need the same usable hit area as broker forms. */
html:root:not(#ui) body:has(#efTopNav) .tutorial-btn,
html:root:not(#ui) body:has(#efTopNav) .ef-dependent-btn,
html:root:not(#ui) body:has(#efTopNav) .coverage-btn,
html:root:not(#ui) body:has(#efTopNav) .review-remove-btn,
html:root:not(#ui) body:has(#efTopNav) .sign-draw-toggle,
html:root:not(#ui) body:has(#stepContainer) .ob-canvas-clear {
  min-height: 36px;
  min-width: 36px;
}
/* The wizard also moulds its ef-* and coverage buttons directly, outside the shared button variables. */
html:root:not(#ui) body:has(#efTopNav) .btn-primary,
html:root:not(#ui) body:has(#efTopNav) .ef-btn-primary,
html:root:not(#ui) body:has(#efTopNav) .add-to-cart-btn:not(.in-cart),
html:root:not(#ui) body:has(#efTopNav) .btn-benefit-select,
html:root:not(#ui) body:has(#efTopNav) .mobile-cart-bar:not(.empty) .mobile-bar-cta:not(.review-mode),
html:root:not(#ui) body:has(#efTopNav) .wg-continue,
html:root:not(#ui) body:has(#stepContainer) .btn-primary,
html:root:not(#ui) body:has(#form-i9) .btn-success {
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  box-sizing: border-box;
  border-radius: var(--cs-radius-md) !important;
  background-image: none !important;
  background-color: var(--primary) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 14px !important;
  line-height: 22px;
}
html:root:not(#ui) body:has(#efTopNav) .btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#efTopNav) .ef-btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#efTopNav) .add-to-cart-btn:not(.in-cart):hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#efTopNav) .btn-benefit-select:hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#efTopNav) .mobile-cart-bar:not(.empty) .mobile-bar-cta:not(.review-mode):hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#efTopNav) .wg-continue:hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#stepContainer) .btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
html:root:not(#ui) body:has(#form-i9) .btn-success:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--primary-hover) !important;
}
html:root:not(#ui) body:has(#efTopNav) .btn-secondary,
html:root:not(#ui) body:has(#efTopNav) .ef-btn-secondary,
html:root:not(#ui) body:has(#efTopNav) .btn-back,
html:root:not(#ui) body:has(#stepContainer) .btn-back,
html:root:not(#ui) body:has(#stepContainer) .btn-outline,
html:root:not(#ui) body:has(#form-i9) .btn-secondary {
  height: 44px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  box-sizing: border-box;
  border-radius: var(--cs-radius-md) !important;
  border: 1px solid var(--cs-border) !important;
  background-image: none !important;
  background-color: var(--bg-primary) !important;
  color: var(--cs-gray-700) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 14px !important;
  line-height: 22px;
}
html:root:not(#ui) body:has(#efTopNav) .btn-secondary:hover:not(:disabled),
html:root:not(#ui) body:has(#efTopNav) .ef-btn-secondary:hover:not(:disabled),
html:root:not(#ui) body:has(#efTopNav) .btn-back:hover:not(:disabled),
html:root:not(#ui) body:has(#stepContainer) .btn-back:hover:not(:disabled),
html:root:not(#ui) body:has(#stepContainer) .btn-outline:hover:not(:disabled),
html:root:not(#ui) body:has(#form-i9) .btn-secondary:hover:not(:disabled) {
  background-color: var(--cs-gray-50) !important;
  border-color: var(--cs-gray-400) !important;
}
html:root:not(#ui) body:has(#efTopNav) button:focus-visible,
html:root:not(#ui) body:has(#stepContainer) button:focus-visible,
html:root:not(#ui) body:has(#form-i9) button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
html:root:not(#ui) body:has(#efTopNav) .review-benefit-paycheck,
html:root:not(#ui) body:has(#efTopNav) .review-benefit-daily-label,
html:root:not(#ui) body:has(#efTopNav) .cart-header > p,
html:root:not(#ui) body:has(#efTopNav) .ef-sidebar-powered-by > span,
html:root:not(#ui) body:has(#stepContainer) .ob-help,
html:root:not(#ui) body:has(#stepContainer) .ob-sig-preview-label {
  font-size: max(12px, 0.75rem) !important;
  color: var(--cs-gray-600);
}
html:root:not(#ui) body:has(#stepContainer) .form-helper,
html:root:not(#ui) body:has(#stepContainer) .top-bar .company-name,
html:root:not(#ui) body:has(#efTopNav) .review-cost-paycheck,
html:root:not(#ui) body:has(#efTopNav) .review-total-row {
  color: var(--cs-gray-600);
}

/* Keyboard wrappers use native handlers and need an equally visible focus indication. */
html:root:not(#ui) body:has(#efTopNav) .preference-option:focus-visible,
html:root:not(#ui) body:has(#stepContainer) .ob-radio-option:focus-visible,
html:root:not(#ui) body:has(#stepContainer) .ob-checkbox-card:focus-visible,
html:root:not(#ui) body:has(#form-i9) .task-item[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Native staggered welcomes otherwise remain translucent even with reduced motion enabled. */
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body:has(#efTopNav) #stage-welcome .stage-card,
  html:root:not(#ui) body:has(#efTopNav) #stage-welcome .welcome-wave,
  html:root:not(#ui) body:has(#efTopNav) #stage-welcome .stage-header,
  html:root:not(#ui) body:has(#efTopNav) #stage-welcome .welcome-subtitle,
  html:root:not(#ui) body:has(#efTopNav) #stage-welcome .btn-primary,
  html:root:not(#ui) body:has(#efTopNav) #stage-welcome .enrollment-deadline,
  html:root:not(#ui) body:has(#efTopNav) .stage-container.active .ef-form-card,
  html:root:not(#ui) body:has(#stepContainer) .step-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-enrollment-green.css ==== */
/* ---------- John: the tabs' green ----------
   Finished benefit tabs are a light emerald (Mint's --success, #10b981); Selected and the green text were a yellower
   green (#15803d) that looked cheaper beside them. Selected now fills with the tabs' green exactly, flat (no bevel or
   edge ring: it is a state, not a button to press), so a chosen plan and its finished tab read as one thing. Green text on white ("Recommended for you", "Your employer pays", the
   per-day figure) takes the same emerald a shade deeper (#047857), because the light one is too faint to read as
   text. Enrollment pages only; the pale tiles behind Who's Covered's ticks are untouched. */

html:root[data-cs-enrollment-page]:not(#ui) body {
  --cs-success-fg: #047857;
}

/* ==== Ported from the redesign's 99-john-enrollment-no-commentary.css ==== */
/* ---------- John: no commentary on enrollment ----------
   Employees are making real money decisions here, so the pages state facts and let them decide. Hidden:
   - price quips under each plan ("Less than a coffee", "Affordable protection");
   - the line after picking a plan ("Great choice!", "That's love in action");
   - the review page's "1 layer of protection for you" and "Affordable peace of mind";
   - the cost panel's emoji comparisons, unsourced savings claims and rotating scare facts.
   Kept: prices, the employer contribution, the cost breakdown and every per-paycheck and per-day figure, and (at
   John's request) the Original's "84% of employees choose this" row with faces. Its percentages are fixed per
   benefit type in Mint's code, not real data. */

html:root[data-cs-enrollment-page]:not(#ui) body .cost-framing,
html:root[data-cs-enrollment-page]:not(#ui) body .selection-encouragement,
html:root[data-cs-enrollment-page]:not(#ui) body #reviewSubtitle,
html:root[data-cs-enrollment-page]:not(#ui) body #reviewCostFraming,
html:root[data-cs-enrollment-page]:not(#ui) body #breakdownComparison,
html:root[data-cs-enrollment-page]:not(#ui) body #breakdownSavings,
html:root[data-cs-enrollment-page]:not(#ui) body #breakdownFact {
  display: none !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-no-lines.css ==== */
/* ---------- John: no lines ----------
   The 1px lines left in enrollment go. Surfaces are told apart by colour alone (the white top bar and the sidebar
   on the grey page, white cards on grey), and lists by space:
   - the line under the top bar: at the top of the page nothing is needed; once the page scrolls, the bar casts a
     soft shadow so cards passing under it do not merge into it (browsers without scroll-linked animation simply
     show no shadow, as at the top);
   - the line down the sidebar's edge;
   - the ring round the sidebar's collapse and show buttons and the Need help button, which already float on a
     shadow;
   - the rule above "Your cost" in a plan's cost breakdown and above the cart's total.
   The review page's row lines go in 99-john-enrollment-review.css. Fields keep their edge: it is what shows where
   to type. The dashed Add buttons keep theirs. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) #efSidebar {
  border-right: 0 !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) #sidebarToggle {
  border: 0 !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) #showSidebarBtn {
  border: 0 !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) #chatToggleBtn {
  border: 0 !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) .cost-breakdown-row.cost-breakdown-total {
  border-top: 0 !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) .cart-total {
  border-top: 0 !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-no-outlines.css ==== */
/* ---------- John: no outline round the containers ----------
   Every enrollment card, and the smaller tiles inside them, also drew a faint 1px ring as part of its shadow. Here
   the ring goes and the soft shadow deepens a little, so white cards still lift off the grey page by shadow alone.
   Selected things keep their company-colour ring (a selected plan, the chosen Help me choose answer): that ring is
   the answer, not an outline. Fields, buttons and the dashed Add buttons are not touched. The progress sidebar's
   footer ("Your data is protected", "Powered by Mint") was a white strip with a line above it on the grey sidebar,
   marking one edge twice; it is now quiet text on the sidebar itself. */

/* All first-level cards (99-john-enrollment-surfaces.css draws them with these). */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) {
  --jx-layer: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px -4px rgba(16, 24, 40, .08);
  --jx-layer-raised: 0 2px 6px rgba(16, 24, 40, .08), 0 12px 28px -8px rgba(16, 24, 40, .14);
}

/* The recommended plan (99-john-enrollment-recommended.css). */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) .stage-container .benefit-card.recommended:not(.selected) {
  box-shadow: 0 2px 6px rgba(16, 24, 40, .07), 0 16px 32px -12px rgba(16, 24, 40, .22) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui):not(#ui) .stage-container .benefit-card.recommended:not(.selected):hover {
  box-shadow: 0 3px 8px rgba(16, 24, 40, .09), 0 20px 40px -12px rgba(16, 24, 40, .26) !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-pref-explainer.css ==== */
/* ---------- John: "What matters most to you?" explainer ----------
   The "i" used to open three centred marketing paragraphs. The wizard's own script draws one trade-off diagram in their
   place: paycheck cost rises from Lowest Cost to Best Coverage while cost when getting care falls, each line
   labelled at its end in its own colour. A marker sits on the current choice; tapping a choice glides it there and
   changes the caption. It sits on the page like the choices it explains, with no box, and Got it is where Continue
   is. Mint's own text stays hidden in the page. */
html:root:not(#ui) body .cs-pref-explain h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-900, #111827);
}
html:root:not(#ui) body .cs-pref-explain .cs-pref-lead {
  margin: 12px 0 28px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cs-gray-600);
}

/* The diagram */
html:root:not(#ui) body .cs-tradeoff {
  margin: 0;
}
html:root:not(#ui) body .cs-tradeoff svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
html:root:not(#ui) body .cs-tradeoff .cs-axis {
  stroke: var(--cs-gray-200);
  stroke-width: 1;
}
html:root:not(#ui) body .cs-tradeoff .cs-guide {
  stroke: var(--cs-gray-300, #d1d5db);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  transition: transform .45s cubic-bezier(.22, .8, .24, 1);
}
html:root:not(#ui) body .cs-tradeoff .cs-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
html:root:not(#ui) body .cs-tradeoff .cs-line-pay {
  stroke: var(--primary);
}
html:root:not(#ui) body .cs-tradeoff .cs-line-care {
  stroke: var(--cs-gray-700);
}
/* The two line names sit above the line ends as page text, so they never shrink with the drawing. */
html:root:not(#ui) body .cs-tradeoff-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16.66% 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
html:root:not(#ui) body .cs-tradeoff-labels .cs-label-care {
  color: var(--cs-gray-700);
  text-align: left;
}
html:root:not(#ui) body .cs-tradeoff-labels .cs-label-pay {
  color: var(--primary);
  text-align: right;
}
html:root:not(#ui) body .cs-tradeoff .cs-dot {
  stroke: var(--bg-primary, #fff);
  stroke-width: 3;
  transition: transform .45s cubic-bezier(.22, .8, .24, 1);
}
html:root:not(#ui) body .cs-tradeoff .cs-dot-pay {
  fill: var(--primary);
}
html:root:not(#ui) body .cs-tradeoff .cs-dot-care {
  fill: var(--cs-gray-700);
}

/* The three choices, each under its point on the diagram. */
html:root:not(#ui) body .cs-tradeoff-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
}
html:root:not(#ui) body .cs-tradeoff-picks button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--cs-gray-500);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease;
}
html:root:not(#ui) body .cs-tradeoff-picks button:hover {
  color: var(--cs-gray-700);
}
html:root:not(#ui) body .cs-tradeoff-picks button[aria-pressed="true"] {
  color: var(--gray-900, #111827);
  font-weight: 600;
}
html:root:not(#ui) body .cs-tradeoff-picks button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 8px;
}
html:root:not(#ui) body .cs-tradeoff figcaption {
  min-height: 24px;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cs-gray-700);
}

@media (max-width: 560px) {
  html:root:not(#ui) body .cs-pref-explain h2 {
    font-size: 24px;
  }
  html:root:not(#ui) body .cs-tradeoff-picks button {
    font-size: 13px;
  }
  html:root:not(#ui) body .cs-tradeoff-labels {
    padding: 0 0 8px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body .cs-tradeoff .cs-guide,
  html:root:not(#ui) body .cs-tradeoff .cs-dot {
    transition: none;
  }
}

/* ==== Ported from the redesign's 99-john-enrollment-recommended.css ==== */
/* ---------- John: the recommended plan, marked by elevation instead of an outline ----------
   Like the highlighted plan in a good pricing table: the recommended card sits a little higher than the others,
   with a softer, deeper shadow, and when the plans appear it settles up into place once (no glow, no loop). Its
   "Recommended for you" strip stays green and reads in sentence case; the "Your coverage" row is neutral. */

html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .stage-container .benefit-card.recommended {
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .04), 0 2px 4px rgba(16, 24, 40, .05), 0 16px 32px -12px rgba(16, 24, 40, .22) !important;
  border-width: 0 !important;
  padding: 21px !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .stage-container .benefit-card.recommended:hover {
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 3px 6px rgba(16, 24, 40, .06), 0 20px 40px -12px rgba(16, 24, 40, .26) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .stage-container .benefit-card.recommended.selected {
  box-shadow: 0 0 0 1px var(--primary), 0 2px 4px rgba(16, 24, 40, .05), 0 16px 32px -12px rgba(16, 24, 40, .22) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .stage-container.active .benefit-card.recommended {
  animation: cs-recommended-settle .6s cubic-bezier(.22, .8, .24, 1) .15s both;
}
@keyframes cs-recommended-settle {
  from { transform: translateY(8px); }
  to { transform: none; }
}

/* The strip: green, as in the Original. Green marks good news (Recommended, Selected, what the employer pays); the
   employer's colour stays for actions. Sentence case. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .recommended-bar {
  background: color-mix(in srgb, var(--cs-success-fg) 8%, var(--bg-primary, #fff)) !important;
  color: var(--cs-success-fg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .recommended-bar .rec-icon {
  background: var(--cs-success-fg) !important;
}
/* The strip runs edge to edge. Cards keep a transparent 1px outline so nothing moves (99-john-enrollment-surfaces.css),
   but this card clips its contents inside that outline, which left a thin white frame round the green. On this card
   the outline goes and the padding grows by the same 1px (the first rule above), so the card keeps its size. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .stage-container .benefit-card.recommended > .recommended-bar {
  margin: -21px -21px 12px !important;
}

/* "Your coverage" is a plain fact, so a neutral row that does not compete with the green signals. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .plan-tier-row {
  background: var(--cs-gray-50) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .plan-tier-label {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cs-gray-600) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .stage-container.active .benefit-card.recommended {
    animation: none;
  }
}

/* ==== Ported from the redesign's 99-john-enrollment-review.css ==== */
/* ---------- John: reviewing your benefits ----------
   "Your Benefits Package" was one white card holding a green banner, a tinted tile beside every plan, each carrier
   in small capitals, a stock line of what every benefit covers, green employer tags, a price per day and per
   paycheck, a small x to remove, and a centred total with a coffee comparison. It is now a statement. The heading
   sits on the page. The plans are one white surface laid out as a table (the benefit's icon, bare; the plan with its
   type and carrier, who it covers by name, the cost per paycheck, Remove; under a plan the employer helps pay for,
   what it pays a month), and a summary panel beside it holds what you pay per paycheck, what your employer pays with
   a bar of its share of the total value, and Confirm; under it a second card, "Almost done", shows the three steps to
   the finish (benefits chosen, sign by the deadline, covered from the start date). The two stay in view while a long
   list scrolls. Green is kept for
   money the employer gives you and nothing else. Where the table is too narrow for a Covers column, who a plan covers
   goes under it; on a narrow screen the panel follows the list. The page arrives as heading, list, then summary;
   removing a plan fades its row, closes the gap and counts the totals down. The wizard's own script shapes the rows and the
   words. */
html:root[data-cs-vt="review"]::view-transition-group(*) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.22, .8, .24, 1);
}
html:root[data-cs-vt="review"]::view-transition-old(*):only-child {
  animation-duration: .14s;
}
html:root[data-cs-vt="review"]::view-transition-old(cs-rv-list) {
  display: none;
}
html:root[data-cs-vt="review"]::view-transition-new(cs-rv-list) {
  height: 100%;
  animation: none;
  object-fit: fill;
}

/* ==== Ported from the redesign's 99-john-enrollment-surfaces.css ==== */
/* ---------- John: flat, layered enrollment surfaces ----------
   Enrollment cards drew a grey outline around every box, and boxes inside boxes drew another. Cards now sit on
   the grey page as white layers with a soft shadow instead of an outline, and boxes inside a card keep only
   their tinted fill. Borders stay where they mean something: fields, the choice cards you pick from, and the
   teal ring on whatever is selected.

   Borders turn transparent rather than being removed, so nothing moves. The double id only adds weight over
   99-john-enrollment-flows.css. */

html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) {
  --jx-layer: 0 0 0 1px rgba(16, 24, 40, .03), 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px -2px rgba(16, 24, 40, .06);
  --jx-layer-raised: 0 0 0 1px rgba(16, 24, 40, .04), 0 2px 4px rgba(16, 24, 40, .06), 0 10px 24px -6px rgba(16, 24, 40, .12);
  --jx-layer-selected: 0 0 0 1px var(--primary), 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px -2px rgba(16, 24, 40, .06);
}

/* First-level cards: white layers, no outline. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-form-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .coverage-header-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .benefit-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .cart-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #coverageSelector,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stage-review-cart > .stage-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stage-sign > .stage-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .step-card,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .task-item,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .form-panel {
  border-color: transparent !important;
  box-shadow: var(--jx-layer) !important;
}

/* Cards you can click lift a little on hover instead of drawing an outline. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .benefit-card:hover,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .task-item:hover {
  box-shadow: var(--jx-layer-raised) !important;
}

/* Selected keeps its teal edge, drawn as a ring so it does not move the layout. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .benefit-card.selected,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .task-item.active {
  box-shadow: var(--jx-layer-selected) !important;
}

/* Boxes inside a card: tinted fill only. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-dependent-item,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .plan-tier-row,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .cost-breakdown,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .pp-member-picker,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ob-info-banner,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ob-ssn-onfile,
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .info-box {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The plan helper prompt reads as one flat tinted action: no teal outline, no gradient. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #advisorPrompt {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-primary, #fff)) !important;
  transition: background-color .15s ease;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #advisorPrompt:hover {
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-primary, #fff)) !important;
}

/* The "days left" pill keeps its soft tint (amber, or red when urgent) without the outline around it. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-urgency-indicator {
  border-color: transparent !important;
}

/* The benefit step strip on Coverage: Mint draws each step as a light grey arrow tile, which matched the Clone's
   grey page and disappeared. Plain steps are white tiles on the grey page, locked steps a step darker; the current,
   done and declined steps keep their own colours. */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .category-step:not(.active):not(.done):not(.waived):not(.locked) {
  background: var(--bg-primary, #fff) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .category-step.locked {
  background: var(--cs-gray-200) !important;
  color: var(--cs-gray-500) !important;
}

/* ==== Ported from the redesign's 99-john-enrollment-tutorial.css ==== */
/* ---------- John: the tutorial video ----------
   Watch a tutorial opened a wide window with a grey title bar and a ruled-off footer holding an outlined Close,
   around a dark navy frame that stayed empty and gave no way to start the video: Mint hides its own play overlay
   because it starts the video itself, so when the video was slow, blocked or missing there was nothing to press.
   The window is now one flat white card with its depth from a soft shadow: the title in sentence case beside a bare
   close mark, and the video set into it on a light tint of the company colour. Until the video plays, a large play
   button sits in the middle with a soft glow breathing out from it, and the video's length under it once known; if the video
   cannot load, the frame says so plainly instead. Once it plays the button steps aside (Mint's own controls stay,
   on hover) and comes back when paused. The window is sized to fit the screen's height too, and the page behind
   keeps its scrollbar's space so nothing shifts. No footer: the close mark, Escape and a click outside all close it.
   The wizard's own script adds the button, the length and the message, and words the titles. */
html:root[data-cs-enrollment-page]:not(#ui):has(#tutorialModal.visible) {
  overflow: hidden !important;
  scrollbar-gutter: stable;
}

/* ==== Ported from the redesign's 99-john-hybrid-buttons.css ==== */
/* ---------- John: Hybrid A ("keycap") buttons, every role ----------
   A blend of the Clone's flat buttons and Mint's raised ones. The fill stays solid Mint (or the company's
   colour). The edges are those of a real key: a thin light line along the top, a darker lip along the bottom
   and a firm outline, with a tight grey contact shadow instead of a teal glow. Pressing sinks it 1px. Corners
   are 10px, between the Clone's 8 and Mint's 12. Sizes do not change.

   The edges are black and white at low opacity over the fill, so they darken or lighten whatever colour a
   button has: teal, a white-label company colour, red for danger, or green for Selected.

   Broker, DM and employee pages: sets the material variables 90-john-mint-buttons.css reads.
   Enrollment: those buttons are painted directly, so they are listed below. */

html:root:not(#ui) body:not(#ui):not(#ui) {
  --jh-solid: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(0, 0, 0, .10), 0 1px 2px rgba(16, 24, 40, .12);
  --jh-solid-press: inset 0 1px 2px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .14);
  --jh-plain: inset 0 -1px 0 rgba(16, 24, 40, .07), 0 0 0 1px rgba(16, 24, 40, .13), 0 1px 2px rgba(16, 24, 40, .06);
  --jh-plain-hover: inset 0 -1px 0 rgba(16, 24, 40, .09), 0 0 0 1px rgba(16, 24, 40, .22), 0 1px 2px rgba(16, 24, 40, .08);
  --jh-plain-press: inset 0 1px 2px rgba(16, 24, 40, .10), 0 0 0 1px rgba(16, 24, 40, .22);
  --jb-radius: 10px;
  --jb-primary-image: none;
  --jb-primary-shadow: var(--jh-solid);
  --jb-primary-hover-image: none;
  --jb-primary-hover-fill: color-mix(in srgb, var(--jb-brand) 90%, #000);
  --jb-primary-hover-shadow: var(--jh-solid);
  --jb-primary-press-shadow: var(--jh-solid-press);
  --jb-danger-image: none;
  --jb-danger-hover-image: none;
  --jb-danger-hover-fill: color-mix(in srgb, var(--jb-danger) 90%, #000);
  --jb-secondary-image: none;
  --jb-secondary-shadow: var(--jh-plain);
  --jb-secondary-hover-image: none;
  --jb-secondary-hover-fill: var(--cs-gray-50);
  --jb-secondary-hover-shadow: var(--jh-plain-hover);
  --jb-secondary-press-shadow: var(--jh-plain-press);
}

/* Press: the key goes down 1px. */
html:root:not(#ui) body .btn:active:not(:disabled),
html:root:not(#ui) body .btn-primary:active:not(:disabled),
html:root:not(#ui) body .btn-secondary:active:not(:disabled),
html:root:not(#ui) body .btn-danger:active:not(:disabled) {
  transform: translateY(1px) !important;
}

/* ----- Enrollment: filled buttons ----- */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-primary:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn-primary:not(.btn):not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-btn.ef-btn-primary:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-benefit-select:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .card-actions .btn-selected:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .add-to-cart-btn:not(.in-cart):not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .wg-continue:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-success:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #mobileBarCta:not(.review-mode):not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .review-cart-btn:not(:disabled) {
  border-radius: 10px !important;
  background-image: none !important;
  box-shadow: var(--jh-solid) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-primary:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn-primary:not(.btn):active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-btn.ef-btn-primary:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-benefit-select:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .card-actions .btn-selected:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .add-to-cart-btn:not(.in-cart):active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .wg-continue:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-success:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #mobileBarCta:not(.review-mode):active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .review-cart-btn:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: var(--jh-solid-press) !important;
}

/* ----- Enrollment: white buttons (Skip for now stays a text link, so the wizard's .btn-back is not here) ----- */
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-btn.ef-btn-secondary:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .card-actions .btn-ghost:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-secondary:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-back:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-outline:not(:disabled) {
  border-color: transparent !important;
  border-radius: 10px !important;
  background-image: none !important;
  box-shadow: var(--jh-plain) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-btn.ef-btn-secondary:hover:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .card-actions .btn-ghost:hover:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-secondary:hover:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-back:hover:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-outline:hover:not(:disabled) {
  box-shadow: var(--jh-plain-hover) !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-btn.ef-btn-secondary:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .card-actions .btn-ghost:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .btn.btn-secondary:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-back:active:not(:disabled),
html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-outline:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: var(--jh-plain-press) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body .btn:active:not(:disabled),
  html:root:not(#ui) body .btn-primary:active:not(:disabled),
  html:root:not(#ui) body .btn-secondary:active:not(:disabled),
  html:root:not(#ui) body .btn-danger:active:not(:disabled),
  html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) .ef-btn:active:not(:disabled),
  html:root[data-cs-enrollment-page]:not(#ui) body:not(#ui) #stepContainer .btn-back:active:not(:disabled) {
    transform: none !important;
  }
}

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

html:root:not(#ui) body[data-broker-page] {
  --john-sk-fill: color-mix(in srgb, var(--cs-gray-200) 64%, var(--bg-primary));
  --john-sk-row: linear-gradient(to bottom, transparent 25px, var(--john-sk-fill) 25px, var(--john-sk-fill) 37px, transparent 37px);
}

/* One neutral material for existing native skeletons, including lazy company panels. */
html:root:not(#ui) body[data-broker-page] .skeleton,
html:root:not(#ui) body[data-broker-page] .sk-b,
html:root:not(#ui) body[data-broker-page] .sk-ghost {
  background-color: var(--john-sk-fill) !important;
}
html:root:not(#ui) body[data-broker-page] .skeleton::after,
html:root:not(#ui) body[data-broker-page] .sk-b::after,
html:root:not(#ui) body[data-broker-page] .sk-ghost::after {
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-primary) 65%, transparent), transparent);
  animation-duration: 1.8s;
}

/* ==== Ported from the redesign's 99-john-navbar-menu.css ==== */
/* John: a compact account menu with whitespace before Sign Out and an Illustrator-drawn settings cog. */

/* Opens from the trigger in 140ms; closes in 90ms. Rows are usable immediately, with no stagger. */
html:root:not(#ui) body #navbarUserDropdown > .navbar-dropdown-menu {
  --jn-enter: 140ms;
  --jn-exit: 90ms;
  --jn-ease: cubic-bezier(.2, .8, .2, 1);
  top: calc(100% + 14px) !important;
  width: 224px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  margin-top: 0 !important;
  padding: 4px 0 !important;
  border-radius: calc(var(--cs-radius-md) / 2) !important;
  background: var(--bg-primary) !important;
  box-shadow: var(--cs-shadow-sm) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) !important;
  pointer-events: none;
  transition: opacity var(--jn-exit) ease, transform var(--jn-exit) ease, visibility 0s var(--jn-exit) !important;
}
html:root:not(#ui) body #navbarUserDropdown.open > .navbar-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
  pointer-events: auto;
  transition: opacity var(--jn-enter) var(--jn-ease), transform var(--jn-enter) var(--jn-ease), visibility 0s !important;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item {
  min-height: 44px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  transition: background-color 100ms ease !important;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item:focus-visible {
  outline: none !important;
  background: var(--cs-gray-100) !important;
  /* The grey row alone is about 1.1:1 on the white menu; a 2px teal inset ring makes keyboard focus visible. */
  box-shadow: inset 0 0 0 2px var(--cs-primary) !important;
  transition: none !important;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item:not(.danger):hover {
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item > i {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  font-size: 18px !important;
  color: inherit !important;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-divider {
  display: none;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-divider:has(+ .danger) {
  display: block;
  height: 8px;
  margin: 0 !important;
  background: transparent !important;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item[href$="/settings"] > i {
  --jn-settings-icon: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.8.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%209.03%20Build%200)%20%20--%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Mint_settings__x2F__24px__x2F__round_1.8pt%22%0D%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%0D%0A%09%20enable-background%3D%22new%200%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20id%3D%22Eight_rounded_teeth%22%20fill%3D%22none%22%20stroke%3D%22%23374151%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20d%3D%22%0D%0A%09M9.61%2C5.34C9.813%2C5.256%2C9.951%2C5.093%2C10%2C4.879l0.344-1.509c0.049-0.214%2C0.196-0.331%2C0.416-0.331h2.48c0.22%2C0%2C0.367%2C0.117%2C0.416%2C0.331%0D%0A%09L14%2C4.879c0.049%2C0.214%2C0.187%2C0.377%2C0.39%2C0.462l0.629%2C0.261c0.203%2C0.084%2C0.416%2C0.066%2C0.602-0.051l1.311-0.824%0D%0A%09c0.186-0.117%2C0.373-0.096%2C0.528%2C0.06l1.754%2C1.754c0.156%2C0.156%2C0.177%2C0.342%2C0.06%2C0.528L18.45%2C8.379%0D%0A%09c-0.117%2C0.186-0.135%2C0.399-0.051%2C0.602L18.66%2C9.61c0.084%2C0.203%2C0.247%2C0.341%2C0.462%2C0.39l1.509%2C0.344%0D%0A%09c0.214%2C0.049%2C0.331%2C0.196%2C0.331%2C0.416v2.48c0%2C0.22-0.117%2C0.367-0.331%2C0.416L19.121%2C14c-0.214%2C0.049-0.377%2C0.187-0.462%2C0.39%0D%0A%09l-0.261%2C0.629c-0.084%2C0.203-0.066%2C0.416%2C0.051%2C0.602l0.824%2C1.311c0.117%2C0.186%2C0.096%2C0.373-0.06%2C0.528l-1.754%2C1.754%0D%0A%09c-0.156%2C0.156-0.342%2C0.177-0.528%2C0.06l-1.311-0.824c-0.186-0.117-0.399-0.135-0.602-0.051L14.39%2C18.66%0D%0A%09c-0.203%2C0.084-0.341%2C0.247-0.39%2C0.462l-0.344%2C1.509c-0.049%2C0.214-0.196%2C0.331-0.416%2C0.331h-2.48c-0.22%2C0-0.367-0.117-0.416-0.331%0D%0A%09L10%2C19.121c-0.049-0.214-0.187-0.377-0.39-0.462l-0.629-0.261c-0.203-0.084-0.416-0.066-0.602%2C0.051l-1.311%2C0.824%0D%0A%09c-0.186%2C0.117-0.373%2C0.096-0.528-0.06L4.786%2C17.46c-0.156-0.156-0.177-0.342-0.06-0.528l0.824-1.311%0D%0A%09c0.117-0.186%2C0.135-0.399%2C0.051-0.602L5.34%2C14.39C5.256%2C14.187%2C5.093%2C14.049%2C4.879%2C14L3.37%2C13.656%0D%0A%09c-0.214-0.049-0.331-0.196-0.331-0.416v-2.48c0-0.22%2C0.117-0.367%2C0.331-0.416L4.879%2C10C5.093%2C9.951%2C5.256%2C9.813%2C5.34%2C9.61%0D%0A%09l0.261-0.629C5.685%2C8.778%2C5.667%2C8.565%2C5.55%2C8.379L4.727%2C7.068C4.61%2C6.882%2C4.631%2C6.696%2C4.786%2C6.54L6.54%2C4.786%0D%0A%09c0.156-0.156%2C0.342-0.177%2C0.528-0.06L8.379%2C5.55c0.186%2C0.117%2C0.399%2C0.135%2C0.602%2C0.051L9.61%2C5.34z%22%2F%3E%0D%0A%3Ccircle%20id%3D%22Center_opening%22%20fill%3D%22none%22%20stroke%3D%22%23374151%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.2%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A");
  font-size: 0 !important;
  background: currentColor;
  mask: var(--jn-settings-icon) center / contain no-repeat;
}
html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item[href$="/settings"] > i > svg {
  display: none !important;
}
/* The panel lives inside Mint's z-index 100 navbar; its backdrop must stay beneath that context. */
html:root:not(#ui) body .notifications-panel-backdrop {
  z-index: 99 !important;
}
/* Mint's list is always empty today, and its Mark all read throws when pressed (docs/mint-issues.md 15). No list, no link. */
html:root:not(#ui) body #notificationsPanel:has(.navbar-notifications-empty) #navbarMarkAllRead {
  display: none;
}
/* Mint's 380px panel ran off the left edge at 390. */
@media (max-width: 480px) {
  html:root:not(#ui) body #notificationsPanel {
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
  }
}
@media (max-width: 768px) {
  html:root:not(#ui) body #navbarUserDropdown > .navbar-dropdown-menu {
    top: calc(var(--cs-header-h) + 4px) !important;
    right: 16px !important;
    left: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body #navbarUserDropdown > .navbar-dropdown-menu,
  html:root:not(#ui) body #navbarUserDropdown.open > .navbar-dropdown-menu,
  html:root:not(#ui) body #navbarUserDropdown .navbar-dropdown-item {
    transition: none !important;
    transform: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-navbar-search.css ==== */
/* John: an icon-led search entry, using Mint's own vector magnifier.
   The existing click, Ctrl+K, results and Escape behavior stay with Mint. */

html:root:not(#ui) body .navbar-search-trigger {
  position: relative;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  /* Icon-only control: a light grey that still meets 3:1 on white (gray-400 is 2.5:1). */
  color: #8a919c !important;
  transition: color 140ms ease !important;
}
html:root:not(#ui) body .navbar-search-trigger::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("/icons/mint-v3/search.svg") center / contain no-repeat;
  mask: url("/icons/mint-v3/search.svg") center / contain no-repeat;
}
html:root:not(#ui) body .navbar-search-trigger:hover,
html:root:not(#ui) body .navbar-search-wrap.open .navbar-search-trigger {
  color: var(--cs-primary) !important;
}
html:root:not(#ui) body .navbar-search-trigger > img {
  display: none !important;
}
html:root:not(#ui) body .navbar-search-trigger > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
}
html:root:not(#ui) body .navbar-search-trigger > kbd {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: block !important;
  width: max-content;
  padding: 3px 6px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: 4px !important;
  background: var(--bg-primary) !important;
  color: var(--cs-gray-700) !important;
  font-size: 12px !important;
  line-height: 18px;
  pointer-events: none;
  visibility: hidden;
}
html:root:not(#ui) body .navbar-search-wrap:not(.open) .navbar-search-trigger:hover > kbd {
  visibility: visible;
}
/* 0ms: focus the field. 140ms: settle 4px into place. Close in 90ms; no row stagger. */
html:root:not(#ui) body .navbar-search-dropdown {
  --jn-enter: 140ms;
  --jn-exit: 90ms;
  --jn-ease: cubic-bezier(.2, .8, .2, 1);
  position: absolute !important;
  top: calc(100% + 18px) !important;
  left: auto !important;
  right: 0 !important;
  width: 400px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: calc(var(--cs-radius-md) / 2) !important;
  background: var(--bg-primary) !important;
  box-shadow: var(--cs-shadow-sm) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) !important;
  pointer-events: none;
  transition: opacity var(--jn-exit) ease, transform var(--jn-exit) ease, visibility 0s var(--jn-exit) !important;
}
html:root:not(#ui) body .navbar-search-wrap.open .navbar-search-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
  pointer-events: auto;
  transition: opacity var(--jn-enter) var(--jn-ease), transform var(--jn-enter) var(--jn-ease), visibility 0s !important;
}
html:root:not(#ui) body .navbar-search-input-wrap {
  padding: 6px 16px !important;
  gap: 12px !important;
  border-bottom: 0 !important;
}
html:root:not(#ui) body .navbar-search-input-wrap::before {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 20px;
  background: var(--cs-gray-500);
  mask: url("/icons/mint-v3/search.svg") center / 18px no-repeat;
}
html:root:not(#ui) body .navbar-search-dropdown input.navbar-search-input {
  padding: 0 !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
}
html:root:not(#ui) body .navbar-search-input::placeholder {
  color: var(--cs-gray-500) !important;
  opacity: 1;
}
html:root:not(#ui) body .navbar-search-results {
  max-height: min(420px, calc(100dvh - var(--cs-header-h) - 120px)) !important;
  padding: 4px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cs-gray-200) transparent;
}
html:root:not(#ui) body .navbar-search-section {
  padding: 10px 16px 4px !important;
  color: var(--cs-gray-700) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html:root:not(#ui) body .navbar-search-result {
  min-height: 44px !important;
  padding: 8px 16px !important;
  gap: 12px !important;
  border-radius: 0 !important;
  transition: background-color 100ms ease !important;
}
html:root:not(#ui) body .navbar-search-result:hover,
html:root:not(#ui) body .navbar-search-result.selected {
  background: var(--cs-outline) !important;
  transition: none !important;
}
html:root:not(#ui) body .navbar-search-result-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cs-gray-500) !important;
  font-size: 14px !important;
}
html:root:not(#ui) body .navbar-search-result-avatar.company {
  color: var(--cs-primary-deep) !important;
}
html:root:not(#ui) body .navbar-search-result-avatar > i {
  font-size: 18px !important;
}
html:root:not(#ui) body .navbar-search-result-avatar > img {
  object-fit: contain !important;
}
html:root:not(#ui) body .navbar-search-result-title {
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}
html:root:not(#ui) body .navbar-search-result:hover .navbar-search-result-title,
html:root:not(#ui) body .navbar-search-result.selected .navbar-search-result-title {
  color: var(--cs-primary-deep) !important;
}
/* Each result has one destination; task shortcuts belong in the named Quick Actions list. */
html:root:not(#ui) body .navbar-search-result > .navbar-search-result-actions {
  display: none !important;
}
html:root:not(#ui) body .navbar-search-result:hover > .navbar-search-result-arrow,
html:root:not(#ui) body .navbar-search-result.selected > .navbar-search-result-arrow {
  opacity: 1 !important;
  color: var(--cs-primary-deep) !important;
}
/* Command labels already say what they do; keep secondary detail for actual people and companies. */
html:root:not(#ui) body .navbar-search-result:has(> .navbar-search-result-avatar.action) .navbar-search-result-sub {
  display: none !important;
}
html:root:not(#ui) body .navbar-search-result-sub {
  color: var(--cs-gray-500) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}
html:root:not(#ui) body .navbar-search-result-title mark {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cs-primary-deep) !important;
  font-weight: 600 !important;
}
html:root:not(#ui) body .navbar-search-result-badge {
  padding: 0 !important;
  background: transparent !important;
  color: var(--cs-gray-500) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
html:root:not(#ui) body .navbar-search-empty {
  padding: 20px 16px !important;
}
html:root:not(#ui) body .navbar-search-empty-icon {
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html:root:not(#ui) body .navbar-search-empty-title {
  font-size: 14px !important;
  color: var(--cs-gray-700) !important;
}
html:root:not(#ui) body .navbar-search-empty-text {
  font-size: 12px !important;
  color: var(--cs-gray-500) !important;
}
html:root:not(#ui) body .navbar-search-footer {
  display: none !important;
}
/* The initial list needs choices, without a second instruction beneath them. */
html:root:not(#ui) body #navbarSearchResults > .navbar-search-section[style]:last-child {
  display: none !important;
}
@media (max-width: 1024px) {
  html:root:not(#ui) body .navbar-search-dropdown {
    position: fixed !important;
    top: calc(var(--cs-header-h) + 4px) !important;
    left: auto !important;
    right: 16px !important;
    width: min(400px, calc(100% - 32px)) !important;
  }
}
@media (max-width: 480px) {
  html:root:not(#ui) body .navbar-search-dropdown input.navbar-search-input {
    font-size: 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body .navbar-search-trigger,
  html:root:not(#ui) body .navbar-search-result {
    transition: none !important;
  }
  html:root:not(#ui) body .navbar-search-dropdown,
  html:root:not(#ui) body .navbar-search-wrap.open .navbar-search-dropdown {
    transition: none !important;
    transform: none !important;
  }
}

/* ==== Ported from the redesign's 99-john-page-motion.css ==== */
/* John: a short content arrival with a stationary shell, not a moving page.
   Storyboard: 0ms keep the header and rail; 160ms tab content settles;
   220ms dashboard cards settle, with 24ms between the first three cards. */

html:root {
  --john-content-arrive: 160ms;
  --john-card-arrive: 220ms;
  --john-arrive-ease: cubic-bezier(.2, .7, .3, 1);
}

/* These loaders are used only by Mint's navigation handlers, not form submission. */
html:root:not(#ui) body[data-broker-page="dashboard"] > .page-loader,
html:root:not(#ui) body[data-broker-page="companies"] > .page-loader,
html:root:not(#ui) body[data-broker-page="enrollments"] > .page-loader,
html:root:not(#ui) body[data-broker-page="company"] > .page-loader {
  background: transparent !important;
  overflow: hidden;
}
html:root:not(#ui) body[data-broker-page="dashboard"] > .page-loader > *,
html:root:not(#ui) body[data-broker-page="companies"] > .page-loader > *,
html:root:not(#ui) body[data-broker-page="enrollments"] > .page-loader > *,
html:root:not(#ui) body[data-broker-page="company"] > .page-loader > * {
  opacity: 0;
}
html:root:not(#ui) body[data-broker-page="dashboard"] > .page-loader.active::before,
html:root:not(#ui) body[data-broker-page="companies"] > .page-loader.active::before,
html:root:not(#ui) body[data-broker-page="enrollments"] > .page-loader.active::before,
html:root:not(#ui) body[data-broker-page="company"] > .page-loader.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: var(--cs-primary);
  transform: translateX(340%);
  animation: john-navigation-progress 1.2s ease-in-out 180ms infinite backwards;
}

/* This is a browser enhancement for same-origin Clone pages, not a navigation interceptor. */
@view-transition {
  navigation: auto;
}
html:root::view-transition-old(root),
html:root::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}
html:root #shared-navbar {
  view-transition-name: john-navbar;
}
html:root #cs-rail {
  view-transition-name: john-rail;
}
html:root::view-transition-group(john-navbar),
html:root::view-transition-group(john-rail) {
  animation: none;
}
html:root::view-transition-old(john-navbar),
html:root::view-transition-old(john-rail) {
  animation: none;
  opacity: 1;
}
html:root::view-transition-new(john-navbar),
html:root::view-transition-new(john-rail) {
  animation: none;
}

/* These static shells already have their final layout before account navigation arrives. */
html:root.cs-early:not(.cs-ready):not(#ui):not(#ui) body[data-broker-page="library"] > main.main,
html:root.cs-early:not(.cs-ready):not(#ui):not(#ui) body[data-broker-page="companies"] > main.main,
html:root.cs-early:not(.cs-ready):not(#ui):not(#ui) body[data-broker-page="enrollments"] > main.main,
html:root.cs-early:not(.cs-ready):not(#ui):not(#ui) body[data-broker-page="company"] > main.main {
  opacity: 1 !important;
  transition: none !important;
}

/* Pre-rendered tabs enter once. Native loading/removal behavior remains in charge. */
html:root:not(#ui) body[data-broker-page] .tab-content.active,
html:root:not(#ui) body[data-broker-page] .docs-tab-content.active,
html:root:not(#ui) body[data-broker-page] .subtab-content.active {
  animation: john-content-arrive var(--john-content-arrive) var(--john-arrive-ease) both !important;
}
html:root:not(#ui) body[data-broker-page] .mint-arrive {
  animation-name: john-content-arrive !important;
  animation-duration: var(--john-content-arrive) !important;
  animation-timing-function: var(--john-arrive-ease) !important;
}

@keyframes john-content-arrive {
  from { opacity: .55; }
}
@keyframes john-navigation-progress {
  from { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html:root:not(#ui) body[data-broker-page] .tab-content.active,
  html:root:not(#ui) body[data-broker-page] .docs-tab-content.active,
  html:root:not(#ui) body[data-broker-page] .subtab-content.active,
  html:root:not(#ui) body[data-broker-page] .mint-arrive,
  html:root:not(#ui) body[data-broker-page="dashboard"] .companies-grid > .company-card,
  html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > *,
  html:root:not(#ui) body[data-broker-page="library"] .docs-list .loading-state::before {
    animation: none !important;
  }
  html:root:not(#ui).cs-revealing body > :not(#cs-rail):not(#ui) {
    transition: none !important;
  }
  html:root:not(#ui) body[data-broker-page] > .page-loader.active::before {
    animation: none;
    transform: none;
    width: 100%;
  }
}

/* ==== Ported from the redesign's 99-john-record-switcher.css ==== */
/* John: record switching uses one compact menu, with fixed search controls and
   a scrolling list. Sorting keeps Mint's native choices and a clear order glyph. */

html:root:not(#ui) body[data-broker-page="company"] #companyDropdown,
html:root:not(#ui) body[data-broker-page="employee"] #employeeDropdown,
html:root:not(#ui) body[data-broker-page="plan"] #planDropdown {
  width: 320px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  max-height: min(440px, calc(100dvh - 180px));
  padding: 6px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: var(--bg-primary);
  box-shadow: var(--cs-shadow-md);
  overflow: visible;
}
html:root:not(#ui) body[data-broker-page="company"] #companyDropdown.open,
html:root:not(#ui) body[data-broker-page="employee"] #employeeDropdown.open,
html:root:not(#ui) body[data-broker-page="plan"] #planDropdown.open {
  display: flex;
  flex-direction: column;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-back,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-back,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-back {
  min-height: 44px;
  flex: 0 0 auto;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  color: var(--cs-gray-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-back::before,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-back::before,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-back::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("/icons/mint-v3/arrow-left.svg") center / contain no-repeat;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-back > span,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-back > span,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-back > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-back:hover,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-back:hover,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-back:hover {
  background: var(--cs-gray-100);
  color: var(--cs-primary-deep);
}

html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-search,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-search,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-search {
  position: relative;
  flex: 0 0 auto;
  padding: 6px 6px 10px;
  border-bottom: 1px solid var(--cs-border);
  gap: 8px;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-search::before,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-search::before,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-search::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 16px;
  height: 16px;
  z-index: 1;
  background: var(--cs-gray-500);
  mask: url("/icons/mint-v3/search.svg") center / contain no-repeat;
  pointer-events: none;
}
html:root:not(#ui) body[data-broker-page="company"] #companySearchInput,
html:root:not(#ui) body[data-broker-page="employee"] #employeeSearchInput,
html:root:not(#ui) body[data-broker-page="plan"] #planSearchInput {
  width: 100%;
  min-width: 0;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px 0 36px !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-md) !important;
  background: var(--bg-primary) !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html:root:not(#ui) body[data-broker-page="company"] #companySearchInput:focus,
html:root:not(#ui) body[data-broker-page="employee"] #employeeSearchInput:focus,
html:root:not(#ui) body[data-broker-page="plan"] #planSearchInput:focus {
  border-color: var(--cs-primary) !important;
  outline: 2px solid var(--cs-ring) !important;
  outline-offset: 0;
}
html:root:not(#ui) body[data-broker-page="company"] #companyDropdownList,
html:root:not(#ui) body[data-broker-page="employee"] #employeeDropdownList,
html:root:not(#ui) body[data-broker-page="plan"] #planDropdownList {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0 0 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--cs-gray-200) transparent;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-item,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-item,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-item {
  min-height: 44px;
  padding: 6px 10px;
  gap: 10px;
  border-radius: 4px;
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-item:hover,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-item:hover,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-item:hover,
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-item.active,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-item.active,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-item.active {
  background: var(--cs-gray-100);
  color: var(--cs-primary-deep);
}
html:root:not(#ui) body[data-broker-page="company"] .company-dropdown-name,
html:root:not(#ui) body[data-broker-page="employee"] .employee-dropdown-name,
html:root:not(#ui) body[data-broker-page="plan"] .plan-dropdown-name {
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  overflow-wrap: anywhere;
}

/* ==== Ported from the redesign's 99-john-reference-buttons.css ==== */
/* John: use the paid team's quieter button material after his direction to revisit
   the moulded style. Keep Mint's existing action hierarchy and target sizes. */

html:root:not(#ui) body[data-broker-page] {
  --jb-radius: var(--cs-radius-md);
  --jb-primary-image: none;
  --jb-primary-shadow: var(--cs-shadow-xs);
  --jb-primary-hover-image: none;
  --jb-primary-hover-fill: var(--cs-primary-hover);
  --jb-primary-hover-shadow: var(--cs-shadow-xs);
  --jb-primary-press-shadow: none;
  --jb-secondary-image: none;
  --jb-secondary-shadow: inset 0 0 0 1px var(--cs-border);
  --jb-secondary-hover-image: none;
  --jb-secondary-hover-fill: var(--cs-gray-50);
  --jb-secondary-hover-shadow: inset 0 0 0 1px var(--cs-gray-400);
  --jb-secondary-press-shadow: inset 0 0 0 1px var(--cs-gray-400);
  --jb-danger-image: none;
  --jb-danger-hover-image: none;
  --jb-danger-hover-fill: var(--jb-danger-press);
}

/* ==== Ported from the redesign's 99-john-role-avatars.css ==== */
/* John: related Illustrator silhouettes identify employees and decision makers.
   Only default portraits are replaced; custom photos and visible names remain. */

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

/* ==== Ported from the redesign's 99-john-spouse-updates.css ==== */
/* ---------- John: Keep your spouse informed, cleaned up ----------
   Employees read this right before choosing benefits. The update choices used to snap in under a divider,
   with a bordered box around every option. Now they unfurl smoothly when an email or phone is typed, and read
   as a plain list: checkbox, label, one line of explanation, with a soft hover instead of a box. "Optional"
   is quiet text, "Not available" is calm grey rather than warning amber, and the Clear / Stop sharing actions
   match the other white buttons. Applies wherever this section appears (the enrollment wizard and the employee
   Settings page). */

html:root:not(#ui) body .sc-optional {
  padding: 0 !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cs-gray-500) !important;
}

/* The "i" sits close to its sentence as a flat tinted disc, no outline (enrollment only; Settings keeps its 36px). */
html:root[data-cs-enrollment-page]:not(#ui) body .sc-intro-row {
  align-items: center !important;
  gap: 4px !important;
}
html:root[data-cs-enrollment-page]:not(#ui) body .sc-info {
  position: relative;
  width: 18px !important;
  height: 18px !important;
  margin-top: 0 !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-primary, #fff)) !important;
  color: var(--primary) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  transition: background-color .15s ease, color .15s ease;
}
html:root[data-cs-enrollment-page]:not(#ui) body .sc-info::after {
  content: '';
  position: absolute;
  inset: -7px;
}
html:root[data-cs-enrollment-page]:not(#ui) body .sc-info:hover,
html:root[data-cs-enrollment-page]:not(#ui) body .sc-info[aria-expanded="true"] {
  background: color-mix(in srgb, var(--primary) 22%, var(--bg-primary, #fff)) !important;
  color: var(--primary) !important;
}

/* The choices unfurl: height opens from 0 while the content fades in and settles. */
html:root:not(#ui) body .sc-choices {
  interpolate-size: allow-keywords;
  margin-top: 24px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  overflow-x: visible;
  overflow-y: clip;
  overflow-clip-margin: 4px;
  transition: height .36s cubic-bezier(.22, .8, .24, 1), opacity .28s ease, margin-top .36s cubic-bezier(.22, .8, .24, 1), display .36s allow-discrete;
}
html:root:not(#ui) body .sc-choices[hidden] {
  display: none;
  height: 0;
  opacity: 0;
  margin-top: 0 !important;
}
html:root:not(#ui) body .sc-choices > .sc-groups {
  transition: transform .36s cubic-bezier(.22, .8, .24, 1);
}
@starting-style {
  html:root:not(#ui) body .sc-choices:not([hidden]) {
    height: 0;
    opacity: 0;
    margin-top: 0 !important;
  }
  html:root:not(#ui) body .sc-choices:not([hidden]) > .sc-groups {
    transform: translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body .sc-choices,
  html:root:not(#ui) body .sc-choices > .sc-groups {
    transition: none;
  }
}

/* A plain list instead of a box per option. */
html:root:not(#ui) body .sc-groups {
  gap: 28px !important;
}
html:root:not(#ui) body .sc-group-title {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gray-900, #111827) !important;
}
html:root:not(#ui) body .sc-options {
  gap: 2px !important;
}
html:root:not(#ui) body .sc-option {
  margin: 0 -12px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background-color .15s ease !important;
}
html:root:not(#ui) body .sc-option:hover:not(.sc-disabled) {
  background: var(--cs-gray-50) !important;
}
html:root:not(#ui) body .sc-option.sc-disabled {
  background: transparent !important;
}
/* Include the cost only shows once Enrollment confirmations is ticked, sliding in under it, instead of sitting
   there greyed out. Its checkbox lines up with the label above. */
html:root:not(#ui) body .sc-option.sc-suboption {
  interpolate-size: allow-keywords;
  margin-left: 20px !important;
  overflow-y: clip;
  transition: height .3s cubic-bezier(.22, .8, .24, 1), opacity .24s ease, padding .3s cubic-bezier(.22, .8, .24, 1), display .3s allow-discrete, background-color .15s ease !important;
}
html:root:not(#ui) body .sc-option.sc-suboption.sc-disabled {
  display: none !important;
  height: 0;
  opacity: 0;
  padding-block: 0 !important;
}
@starting-style {
  html:root:not(#ui) body .sc-option.sc-suboption:not(.sc-disabled) {
    height: 0;
    opacity: 0;
    padding-block: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#ui) body .sc-option.sc-suboption {
    transition: none !important;
  }
}
html:root:not(#ui) body .sc-option-label {
  font-size: 15px !important;
  color: var(--gray-900, #111827) !important;
}
html:root:not(#ui) body .sc-option-desc {
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--cs-gray-600) !important;
}
html:root:not(#ui) body .sc-option.sc-disabled .sc-option-label,
html:root:not(#ui) body .sc-option.sc-disabled .sc-option-desc {
  color: var(--cs-gray-400) !important;
}
html:root:not(#ui) body .sc-tag {
  background: var(--cs-gray-100) !important;
  color: var(--cs-gray-600) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
/* "Email only for now..." repeats the Coming soon tag and the phone field's own note. */
html:root:not(#ui) body .sc-choices .sc-hint {
  display: none !important;
}

/* Clear spouse details, Stop sharing, Send confirmation again: the same white button as Back. */
html:root:not(#ui) body .sc-foot {
  margin-top: 24px !important;
}
html:root:not(#ui) body .sc-stop,
html:root:not(#ui) body .sc-resend {
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--bg-primary, #fff) !important;
  box-shadow: var(--jh-plain, inset 0 0 0 1px var(--cs-border)) !important;
  color: var(--cs-gray-700) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
html:root:not(#ui) body .sc-stop:hover:not([disabled]),
html:root:not(#ui) body .sc-resend:hover:not([disabled]) {
  background: var(--cs-gray-50) !important;
  box-shadow: var(--jh-plain-hover, inset 0 0 0 1px var(--cs-gray-400)) !important;
}

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

/* The seven-column layouts lose useful reading space before the phone breakpoint. */
@media (min-width: 769px) and (max-width: 959px) {
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records,
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .table-container > table.mint-records {
    display: block;
    min-width: 0;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records > tbody,
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .mint-company-roster > tbody {
    display: block;
    width: 100%;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records > tbody > tr,
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .mint-company-roster > tbody > tr {
    display: grid;
    gap: 12px 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--cs-border);
    background: var(--bg-primary);
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records > tbody > tr:last-child,
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .mint-company-roster > tbody > tr:last-child {
    border-bottom: 0;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list > table.mint-records > tbody > tr > td,
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .mint-company-roster > tbody > tr > td {
    display: block;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list td[data-label]:not(:first-child):not(:last-child)::before,
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .mint-roster-detail[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--cs-gray-500);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
  }
  html:root:not(#ui) body[data-broker-page="library"] .docs-list td[colspan],
  html:root:not(#ui) body[data-broker-page="company"] #tab-employees .mint-company-roster td[colspan] {
    grid-column: 1 / -1;
  }
}

/* ==== Ported from the redesign's 99-john-workspace-empty.css ==== */
/* John: empty states preview the work to come, using Mint's native decorative DOM.
   Match the quiet materials and scale of the New Hires flow; preserve state and actions. */

html:root:not(#ui) body[data-broker-page="dashboard"] #enrollmentsContainer > .empty-enrollments .mg-enroll,
html:root:not(#ui) body[data-broker-page="enrollments"] .mg-enroll,
html:root:not(#ui) body[data-broker-page="library"] #formsEmpty .mg,
html:root:not(#ui) body[data-broker-page="library"] #draftsEmpty .mg,
html:root:not(#ui) body[data-broker-page="library"] #sentEmpty .mg,
html:root:not(#ui) body[data-broker-page="library"] #packetsEmpty .mg,
html:root:not(#ui) body[data-broker-page="company"] #jobClassesEmpty .mv-group,
html:root:not(#ui) body[data-broker-page="company"] #companyDocsEmpty .mv-doc,
html:root:not(#ui) body[data-broker-page="company"] #libraryDocsEmpty .mv-doc,
html:root:not(#ui) body[data-broker-page="company"] #locationsEmpty .mv-place,
html:root:not(#ui) body[data-broker-page="company"] #tab-cobra .mv-cobra {
  position: relative;
  width: 152px !important;
  height: 112px !important;
  max-width: 100%;
  margin: 0 auto 24px !important;
  opacity: 1;
  background: none;
  border: 0;
  box-shadow: none;
  user-select: none;
}

/* ==== Ported from the redesign's 99-john-workspace-navigation.css ==== */
/* John: Mint's bottom navigation starts at 1199px while the Clone rail remains
   visible above 768px. Use the rail alone where those breakpoints overlap. */

@media (min-width: 769px) and (max-width: 1199px) {
  html:root.cs-shell:not([data-cs-embed]):not(#ui) body[data-broker-page] .mint-workspace-nav,
  html:root.cs-shell:not([data-cs-embed]):not(#ui) body[data-broker-page] .mint-workspace-more {
    display: none !important;
  }
  html:root.cs-shell:not([data-cs-embed]):not(#ui) body[data-broker-page]:has(.mint-workspace-nav)::after {
    display: none;
  }
}

/* Flat broker dialog shell. Page-owned sizing, forms and footer actions remain intact. */
html:root:not(#ui):not(#mint-dialog-scope) body[data-broker-page] .modal-overlay:not(#electionModalOverlay):not(.as-popover) {
  background:rgba(20,29,27,.46) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
html:root:not(#ui):not(#mint-dialog-scope) body[data-broker-page] .modal-overlay > :is(.modal,.modal-content) {
  border:0 !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:0 6px 0 rgba(16,36,30,.13) !important;
}
html:root:not(#ui):not(#mint-dialog-scope) body[data-broker-page] :is(.modal,.modal-content) > :is(.modal-header,.modal-footer) {
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
html:root:not(#ui):not(#mint-dialog-scope) body[data-broker-page] .modal-header :is(h2,h3,.modal-title) {
  font-size:20px !important;
  line-height:1.4 !important;
  font-weight:600 !important;
}
/* One unboxed 24px cross in a 44px hit area, independent of legacy icon fonts. */
html:root:not(#ui):not(#mint-dialog-scope):not(#mint-close-scope) body[data-broker-page] :is(.modal-header,.election-modal-header,.election-unlock-header,.employee-document-dialog-head) > :is(.modal-close,.modal-close-btn,.close-btn,.election-modal-close,#electionUnlockClose,button[aria-label="Close"]) {
  position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 44px !important; width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important;
  padding:0 !important; border:0 !important; border-radius:10px !important;
  background:transparent !important; box-shadow:none !important; color:#52635e !important;
  font-size:0 !important; line-height:0 !important; transform:none !important;
}
html:root:not(#ui):not(#mint-dialog-scope):not(#mint-close-scope) body[data-broker-page] :is(.modal-header,.election-modal-header,.election-unlock-header,.employee-document-dialog-head) > :is(.modal-close,.modal-close-btn,.close-btn,.election-modal-close,#electionUnlockClose,button[aria-label="Close"]) > * { display:none !important; }
html:root:not(#ui):not(#mint-dialog-scope):not(#mint-close-scope) body[data-broker-page] :is(.modal-header,.election-modal-header,.election-unlock-header,.employee-document-dialog-head) > :is(.modal-close,.modal-close-btn,.close-btn,.election-modal-close,#electionUnlockClose,button[aria-label="Close"])::before {
  content:"" !important; position:static !important; display:block !important; width:24px !important; height:24px !important;
  background:currentColor !important; transform:none !important; border:0 !important; border-radius:0 !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 16 16M20 4 4 20' fill='none' stroke='black' stroke-width='1.35'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
html:root:not(#ui):not(#mint-dialog-scope):not(#mint-close-scope) body[data-broker-page] :is(.modal-header,.election-modal-header,.election-unlock-header,.employee-document-dialog-head) > :is(.modal-close,.modal-close-btn,.close-btn,.election-modal-close,#electionUnlockClose,button[aria-label="Close"])::after { content:none !important; }
html:root:not(#ui):not(#mint-dialog-scope):not(#mint-close-scope) body[data-broker-page] :is(.modal-header,.election-modal-header,.election-unlock-header,.employee-document-dialog-head) > :is(.modal-close,.modal-close-btn,.close-btn,.election-modal-close,#electionUnlockClose,button[aria-label="Close"]):hover { background:#edf1ef !important; color:#254a42 !important; }
html:root:not(#ui):not(#mint-dialog-scope):not(#mint-close-scope) body[data-broker-page] :is(.modal-header,.election-modal-header,.election-unlock-header,.employee-document-dialog-head) > :is(.modal-close,.modal-close-btn,.close-btn,.election-modal-close,#electionUnlockClose,button[aria-label="Close"]):focus-visible { outline:2px solid #00857e !important; outline-offset:2px !important; }

/* Menu reference: Company > Employees > Status. Use its existing tokens and row rhythm. */
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) :is(.enrollment-dropdown-menu,.company-dropdown,.employee-dropdown,.company-sort-menu,.col-filter-dropdown,.dm-dropdown,.dm-dropdown-list,.doc-dropdown,.carrier-dropdown-list,.custom-dropdown,.cdrop-menu) {
  background:#fff !important; border:1px solid var(--cs-border) !important; border-radius:var(--cs-radius-md) !important; box-shadow:var(--cs-shadow-lg) !important; color:var(--cs-gray-700);
  padding:6px !important; box-sizing:border-box; transition:none !important;
}
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) :is(.cdrop-option,.dm-dropdown-item,.doc-dropdown-item,.company-dropdown-item,.employee-dropdown-item,.custom-dropdown-option,.col-filter-item,.dm-dropdown-option,.carrier-dropdown-item) {
  display:flex; align-items:center; min-height:44px; box-sizing:border-box; padding:10px 11px !important;
  border-radius:4px !important; border:0 !important; box-shadow:none !important; transition:none !important;
  font-size:14px !important; font-weight:400 !important;
}
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) :is(.cdrop-option,.dm-dropdown-item,.doc-dropdown-item,.company-dropdown-item,.employee-dropdown-item,.custom-dropdown-option,.col-filter-item,.dm-dropdown-option,.carrier-dropdown-item):hover { background:var(--cs-gray-50) !important; }
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) :is(.cdrop-option,.custom-dropdown-option).selected,
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) :is(.company-dropdown-item,.employee-dropdown-item).active { background:var(--cs-gray-100) !important; color:var(--cs-primary-deep) !important; }
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) .cdrop-option::after { content:""; display:block; visibility:hidden; flex:none; width:16px; height:16px; margin-left:auto; background:var(--cs-primary); mask:url('/icons/mint-v3/check.svg') center/contain no-repeat; }
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) .cdrop-option.selected::after { visibility:visible; }
html:root:not(#ui):not(#mint-menu-scope) body:is([data-broker-page="company"],[data-broker-page="employee"]) :is(.company-dropdown-search,.employee-dropdown-search,.company-dropdown-back,.employee-dropdown-back,.custom-dropdown-search) { border:0 !important; }
html:root:not(#ui):not(#mint-menu-scope) body[data-broker-page="company"] #enrollmentDropdownMenu { width:320px; min-width:0 !important; max-width:calc(100vw - 32px); overflow:hidden; }
html:root:not(#ui):not(#mint-menu-scope) body[data-broker-page="company"] #enrollmentDropdownMenu > :is(button,label) {
  margin:0 !important; min-height:44px; box-sizing:border-box; padding:12px 11px !important; border:0 !important; border-radius:4px !important;
  box-shadow:none !important; font-size:14px !important; line-height:20px; background:transparent !important;
}
html:root:not(#ui):not(#mint-menu-scope) body[data-broker-page="company"] #enrollmentDropdownMenu > :is(button,label):hover { background:var(--cs-gray-50) !important; }
html:root:not(#ui):not(#mint-menu-scope) body[data-broker-page="company"] #enrollmentDropdownMenu > div { border:0 !important; border-radius:4px !important; margin:0 !important; }
html:root:not(#ui):not(#mint-menu-scope) body[data-broker-page="company"] #enrollmentDropdownMenu > button :is(i,svg) { color:#56716a !important; }
html:root:not(#ui):not(#mint-menu-scope) body[data-broker-page="company"] #enrollmentDropdownMenu > button:disabled { cursor:not-allowed; opacity:.45; }

/* Company Profile keeps its label/value rhythm while a card is being edited. */
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] #tab-profile [hidden] { display:none !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-row {
  display:grid !important; grid-template-columns:minmax(120px, .8fr) minmax(0, 1.2fr); align-items:center; gap:12px; padding:6px 0; min-height:48px;
}
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-row > .profile-label { margin:0; color:#6b7f91 !important; font-weight:400; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-row :is(.form-input,summary) {
  width:100% !important; min-width:0; min-height:40px; box-sizing:border-box; border:0 !important; border-radius:6px !important;
  background:#f2f5f4 !important; box-shadow:none !important; padding:10px 12px !important; font:inherit; font-size:14px; color:#25413b;
}
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-actions { display:flex; align-items:center; gap:8px; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-actions .btn { min-height:36px !important; height:36px !important; padding:7px 13px !important; font-size:13px !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-actions .btn-secondary { border:0 !important; background:transparent !important; box-shadow:none !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-toggle { display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; color:#25413b; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-toggle input { all:revert !important; display:inline-block !important; width:16px !important; height:16px !important; flex:0 0 16px; margin:0 !important; accent-color:#00857e !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-form:has(#editAutoRenew:not(:checked)) #renewalMonthGroup { display:none !important; }
.profile-paycycles { position:relative; min-width:0; }
.profile-paycycles summary { display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; }
.profile-paycycles summary::-webkit-details-marker { display:none; }
.profile-paycycles summary::after { content:''; width:12px; height:12px; margin-left:auto; flex-shrink:0; background:#5e7771; mask:url('/icons/mint-v3/chevron-down.svg') center/contain no-repeat; }
.profile-paycycles[open] summary::after { transform:rotate(180deg); }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-paycycles #payCycleCheckboxes {
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; display:block; max-height:280px; overflow:auto;
  margin:0; padding:6px; background:#fff; border:1px solid var(--cs-border); border-radius:8px; box-shadow:var(--cs-shadow-lg);
}
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-paycycles .paycycle-checkbox {
  display:flex; gap:10px; min-height:44px; box-sizing:border-box; padding:10px 11px; margin:0; border:0 !important; border-radius:4px !important; background:transparent !important; font-size:14px;
}
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-paycycles .paycycle-checkbox:hover { background:var(--cs-gray-50) !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-paycycles .paycycle-checkbox:has(:checked) { color:var(--cs-primary-deep); background:var(--cs-gray-100) !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-row :is(input,select,summary):focus-visible { outline:2px solid #00857e !important; outline-offset:2px; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-section--editing { overflow:visible !important; }
html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-section--editing .profile-section-header { border-radius:12px 12px 0 0; }
@media (max-width:600px) {
  html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-inline-row { grid-template-columns:1fr; gap:6px; padding:8px 0; }
  html:root:not(#ui):not(#profile-scope) body[data-broker-page="company"] .profile-section--editing .profile-section-header { flex-wrap:wrap; gap:12px; }
}