/* GENERATED COPY — run CustomerFrontEnd/scripts/sync-shared-design.cjs
 * Source SHA-256: f0ab23acf34477aaa31b941e828c4777328a5016caa9b9fb8d447774804cf165
 */
/* CANONICAL SOURCE: CustomerFrontEnd/src/assets/styles/plexe-shared-design.css
 * Edit here, then run: node scripts/sync-shared-design.cjs
 * Customer's measured English defaults. Semantic states and icon/composite
 * controls are explicit exceptions; shared segmented controls and product
 * header surfaces are standardized below.
 * Load before application styles: important declarations in the first layer
 * take precedence over legacy component and framework overrides.
 */
@layer plexe-shared-design {
  .plexe-design-system {
    --pds-font: var(
      --app-font-family,
      'Poppins',
      'Segoe UI',
      'Noto Sans',
      'Microsoft YaHei',
      'PingFang SC',
      'Microsoft JhengHei',
      'Arial Unicode MS',
      sans-serif
    );
    font-family: var(--pds-font) !important;
  }

  .plexe-design-system :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--pds-font) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    color: var(--pds-ink) !important;
  }
  .plexe-design-system h1 {
    font-size: 32px !important;
  }
  .plexe-design-system h2 {
    font-size: 1.6rem !important;
  }
  .plexe-design-system h3 {
    font-size: 16px !important;
  }
  .plexe-design-system h4 {
    font-size: clamp(1.275rem, calc(1.275rem + 0.3vw), 1.5rem) !important;
  }
  .plexe-design-system h5 {
    font-size: 20px !important;
    color: var(--pds-body) !important;
  }
  .plexe-design-system h6 {
    font-size: 16px !important;
    color: var(--pds-body) !important;
  }
  .plexe-design-system p:where(:not(.error, .text-danger, .text-success, .text-warning)) {
    font: 400 12px/18px var(--pds-font) !important;
    color: var(--pds-body) !important;
    letter-spacing: normal !important;
  }
  /* Classed navigation links and action links keep their own roles. */
  .plexe-design-system :where(a:not([class]), .pds-inline-link) {
    font: 400 12px/18px var(--pds-font) !important;
    color: var(--pds-link) !important;
    text-decoration: underline !important;
    letter-spacing: normal !important;
  }
  .plexe-design-system :where(a:not([class]), .pds-inline-link):hover {
    color: var(--pds-link-hover) !important;
  }
  .plexe-design-system :where(h1, h2, h3, h4, h5, h6) a {
    font: inherit !important;
    color: inherit !important;
  }
  .plexe-design-system :where(label, .form-label, .col-form-label, .cf-label) {
    font: 400 16px/24px var(--pds-font) !important;
    color: var(--pds-muted) !important;
  }

  /* Shared text-button roles. Icon-only, navigation and pagination controls
   * opt out so their compact layouts remain usable. */
  .plexe-design-system
    :where(
      .btn,
      .cf-button,
      .plexe-button,
      .pds-button,
      .plexe-btn,
      .plexe-btn-primary,
      .plexe-btn-secondary,
      .plexe-blue-btn,
      .plexe-blue-outline-btn,
      .plexe-orange-outline-btn,
      .create-application-action,
      button.secondary,
      .site-shell a.secondary,
      button.secondary-action,
      button.danger,
      .site-shell button:not([class]),
      .site-shell button[class=''],
      .tabs button,
      .filters button,
      .side-card button
    ):not(
      :where(
          .admin-icon-button,
          .admin-action,
          .check-filter,
          .pagination-number,
          .pagination-link,
          .searchbar button,
          .home-style-search button,
          .icon-button,
          .btn-icon,
          .dropdown-toggle-split
        )
    ) {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 24px !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    font: 600 14px/20px var(--pds-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  .plexe-design-system
    :where(
      .btn-primary,
      .cf-button--primary,
      .plexe-button--primary,
      .pds-primary,
      .plexe-btn-primary,
      .plexe-blue-btn,
      .create-application-action,
      .site-shell button:not([class]),
      .site-shell button[class=''],
      .plexe-button:not(
          .plexe-button--secondary,
          .plexe-button--outline,
          .plexe-button--ghost,
          .plexe-button--danger,
          .secondary,
          .danger
        )
    ) {
    background: var(--pds-primary) !important;
    border-color: var(--pds-primary) !important;
    color: var(--pds-on-primary) !important;
    box-shadow: var(--pds-shadow) !important;
  }
  .plexe-design-system
    :where(
      .btn-secondary,
      .cf-button--secondary,
      .plexe-button--secondary,
      .pds-secondary,
      .plexe-btn-secondary,
      button.secondary,
      .site-shell a.secondary,
      button.secondary-action
    ) {
    background: var(--pds-disabled) !important;
    border-color: var(--pds-disabled) !important;
    color: var(--pds-on-primary) !important;
    box-shadow: none !important;
  }
  .plexe-design-system
    :where(
      .btn-outline-primary,
      .cf-button--ghost,
      .plexe-button--outline,
      .plexe-button--ghost,
      .pds-ghost,
      .plexe-blue-outline-btn,
      .plexe-orange-outline-btn,
      .tabs button,
      .filters button:not(.check-filter),
      .side-card button
    ) {
    background: transparent !important;
    border-color: var(--pds-primary) !important;
    color: var(--pds-primary) !important;
    box-shadow: none !important;
  }
  .plexe-design-system
    :where(
      .btn-outline-primary,
      .cf-button--ghost,
      .plexe-button--outline,
      .plexe-button--ghost,
      .pds-ghost,
      .plexe-blue-outline-btn,
      .plexe-orange-outline-btn,
      .tabs button,
      .filters button:not(.check-filter),
      .side-card button
    ):is(:hover, :focus, :active, .selected) {
    background: var(--pds-primary) !important;
    color: var(--pds-on-primary) !important;
  }
  .plexe-design-system :where(.btn.btn-sm, .cf-button--small, .plexe-button--small, .pds-small) {
    padding: 8px 16px !important;
    font-size: 12px !important;
    min-height: 0 !important;
  }
  .plexe-design-system
    :where(.btn-danger, .cf-button--danger, .plexe-button--danger, .pds-danger, button.danger:not(.admin-icon-button)) {
    background: var(--pds-danger) !important;
    border-color: var(--pds-danger) !important;
    color: var(--pds-on-primary) !important;
    box-shadow: none !important;
  }
  .plexe-design-system
    :where(
      .btn-danger,
      .cf-button--danger,
      .plexe-button--danger,
      .pds-danger,
      button.danger:not(.admin-icon-button)
    ):hover {
    background: var(--pds-danger-hover) !important;
    border-color: var(--pds-danger-border-hover) !important;
  }
  .plexe-design-system
    :where(
      .btn-primary,
      .cf-button--primary,
      .plexe-button--primary,
      .pds-primary,
      .plexe-btn-primary,
      .plexe-blue-btn,
      .create-application-action,
      .site-shell button:not([class]),
      .site-shell button[class=''],
      .plexe-button
    ):is(:disabled, .disabled) {
    background: var(--pds-disabled) !important;
    border-color: var(--pds-disabled) !important;
    color: var(--pds-muted) !important;
    opacity: 0.65 !important;
    cursor: pointer !important;
    pointer-events: none;
  }

  /* Compact segmented controls shared by Customer, Partner, Help and Public API. */
  .plexe-design-system {
    --pds-segmented-radius: 12px;
    --pds-segmented-item-radius: 8px;
  }
  .plexe-design-system
    :where(
      .pds-segmented,
      .tabs,
      .tabs-set,
      .nav-tabs,
      .impersonation-selector__segmented,
      .portal-segmented,
      .api-chart-switch
    ) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--pds-border) !important;
    border-radius: var(--pds-segmented-radius) !important;
    background: var(--pds-soft) !important;
    box-shadow: none !important;
    scrollbar-width: thin;
  }
  .plexe-design-system :where(.tabs-set, .nav-tabs) > .nav-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .plexe-design-system
    :where(
      .pds-segmented > :is(button, a),
      .tabs > button,
      .tabs-set .nav-link,
      .nav-tabs .nav-link,
      .impersonation-selector__segmented > button,
      .portal-segmented > a,
      .api-chart-switch > button
    ) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: var(--pds-segmented-item-radius) !important;
    background: transparent !important;
    color: var(--pds-muted) !important;
    box-shadow: none !important;
    font: 500 12px/18px var(--pds-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .plexe-design-system
    :where(
      .pds-segmented > :is(button, a),
      .tabs > button,
      .tabs-set .nav-link,
      .nav-tabs .nav-link,
      .impersonation-selector__segmented > button,
      .portal-segmented > a,
      .api-chart-switch > button
    ):is(.selected, .active, .is-active, [aria-selected='true'], [aria-pressed='true']) {
    background: var(--pds-surface) !important;
    color: var(--pds-primary) !important;
    box-shadow: 0 2px 8px rgba(31, 41, 51, 0.08) !important;
  }
  .plexe-design-system
    :where(
      .pds-segmented > :is(button, a),
      .tabs > button,
      .tabs-set .nav-link,
      .nav-tabs .nav-link,
      .impersonation-selector__segmented > button,
      .portal-segmented > a,
      .api-chart-switch > button
    ):not(.selected, .active, .is-active, [aria-selected='true'], [aria-pressed='true']):not(
      :disabled,
      .disabled,
      [aria-disabled='true']
    ):hover {
    background: transparent !important;
    color: var(--pds-primary) !important;
  }
  .plexe-design-system
    :where(
      .pds-segmented > :is(button, a),
      .tabs > button,
      .tabs-set .nav-link,
      .nav-tabs .nav-link,
      .impersonation-selector__segmented > button,
      .portal-segmented > a,
      .api-chart-switch > button
    ):focus-visible {
    outline: 2px solid var(--pds-primary) !important;
    outline-offset: 1px !important;
  }
  .plexe-design-system
    :where(
      .pds-segmented > :is(button, a),
      .tabs > button,
      .tabs-set .nav-link,
      .nav-tabs .nav-link,
      .impersonation-selector__segmented > button,
      .portal-segmented > a,
      .api-chart-switch > button
    ):is(:disabled, .disabled, [aria-disabled='true']) {
    cursor: not-allowed !important;
    opacity: 0.65 !important;
  }
  .plexe-design-system :where(.tabs-set, .nav-tabs) :where(.tab-title-wrapper, .title-active-border) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font: inherit !important;
  }

  /* Product headers sit on the page canvas with a rule aligned to their content. */
  .plexe-design-system
    :where(
      app-customer-header .nav-container,
      app-public-header .nav-container,
      app-public-header .navbar,
      app-partner-header .navbar,
      app-agent-header .navbar,
      .site-shell .topbar,
      .portal-shell .cf-topbar
    ) {
    --pds-navigation-divider-bottom-offset: 0px;
    --pds-navigation-divider-inset: 32px;
    background: var(--wl-nav-background-color, var(--pds-canvas)) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .plexe-design-system app-customer-header .nav-container {
    --pds-navigation-divider-bottom-offset: 8px;
    --pds-navigation-divider-inset: 42px;
  }
  .plexe-design-system app-public-header .navbar {
    --pds-navigation-divider-inset: 38px;
  }
  .plexe-design-system :where(app-public-header .navbar, app-partner-header .navbar, app-agent-header .navbar) {
    position: relative;
  }
  .plexe-design-system
    :where(
      app-customer-header .nav-container,
      app-public-header .nav-container,
      app-public-header .navbar,
      app-partner-header .navbar,
      app-agent-header .navbar,
      .site-shell .topbar,
      .portal-shell .cf-topbar
    )::after {
    position: absolute;
    right: var(--pds-navigation-divider-inset);
    bottom: var(--pds-navigation-divider-bottom-offset);
    left: var(--pds-navigation-divider-inset);
    height: 1px;
    background: var(--pds-border);
    content: '';
    pointer-events: none;
  }

  @media (max-width: 1279.98px) {
    .plexe-design-system
      :where(app-partner-header .navbar, app-agent-header .navbar, .site-shell .topbar, .portal-shell .cf-topbar) {
      --pds-navigation-divider-inset: 16px;
    }
  }

  @media (max-width: 767.98px) {
    .plexe-design-system app-customer-header .nav-container {
      --pds-navigation-divider-inset: 27px;
    }
    .plexe-design-system app-public-header .navbar {
      --pds-navigation-divider-inset: 14px;
    }
  }

  .plexe-design-system
    :where(
      .form-control,
      .cf-input,
      .pds-input,
      .site-shell input:not([type]),
      .site-shell
        input:is(
          [type='text'],
          [type='email'],
          [type='search'],
          [type='tel'],
          [type='number'],
          [type='url'],
          [type='password']
        ),
      .form-select,
      .cf-select,
      .pds-select,
      .site-shell select,
      .site-shell .guide-search,
      .site-shell .searchbar,
      .site-shell .home-style-search
    ):not(.form-floating > *) {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid var(--pds-field-border) !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    color: var(--pds-ink) !important;
    font: 400 14px/21px var(--pds-font) !important;
    padding: 6px 12px !important;
    box-shadow: none !important;
  }
  .plexe-design-system :where(.form-select, .cf-select, .pds-select, .site-shell select):not(.form-floating > *) {
    appearance: none !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    background-repeat: no-repeat !important;
  }
  .plexe-design-system
    :where(
      .form-control,
      .cf-input,
      .pds-input,
      .form-select,
      .cf-select,
      .pds-select,
      .site-shell input,
      .site-shell select,
      .site-shell .guide-search,
      .site-shell .searchbar,
      .site-shell .home-style-search
    ):is(:focus, :focus-within) {
    background-color: var(--pds-soft) !important;
    border-color: var(--pds-primary) !important;
    box-shadow: var(--pds-ring) !important;
    outline: 0 !important;
  }
  .plexe-design-system
    .site-shell
    :is(.guide-search input, .searchbar input, .home-style-search input, .home-style-search .guide-search) {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
  .plexe-design-system
    :is(.form-control, .cf-input, .site-shell input, .site-shell select):is(.invalid-control, .is-invalid) {
    background-color: var(--pds-invalid-fill) !important;
    border-color: var(--pds-invalid-border) !important;
    box-shadow: 0 0 0 3px var(--pds-invalid-ring) !important;
  }

  /* Help card standard. Map actual surfaces, never card headers, layout grids,
   * menus or controls. New components opt in with .pds-card.
   * Keep each component's padding, dimensions and responsive layout. */
  .plexe-design-system {
    --pds-card-radius: 16px;
    --pds-card-shadow: 0 4px 5px rgba(99, 105, 121, 0.15), 0 1px 3px rgba(99, 105, 121, 0.16);
  }

  .plexe-design-system
    :where(
      .pds-card,
      .card,
      .plexe-card,
      .cf-card,
      .bg-white.box-shadow,
      .partner-shell-v2__content,
      .agent-shell-v2__content,
      .dashboard-surface,
      .dashboard-summary-card,
      .command-card,
      .analytics-card,
      .insight-card,
      .assignment-center-card,
      .download-report-panel,
      .mobile-dashboard-card,
      .mobile-insight-card,
      .mobile-mini-chart-card,
      .case-summary-card,
      .customer-action-status-card,
      .cancelled-summary-card,
      .application-workflow-filter-card,
      .completed-filter-card,
      .all-kanban-card,
      .content-panel,
      .container-card,
      .account-card,
      .offer-card,
      .disconnect-card,
      .review-card,
      .dashboard-metric-card,
      .repayments-card,
      .early-repayment-card,
      .customer-extra-repayment-card,
      .extra-repayment-detail-card,
      .extra-repayment-summary-card,
      .repayment-items-card,
      .transaction-card,
      .empty-transaction-card,
      .cash-flow-card,
      .associate-card,
      .associates-panel,
      .checkout-card,
      .completion-card,
      .result-summary-card,
      .summary-card,
      .term-card,
      .utility-panel,
      .api-panel,
      .api-stat,
      .portal-event-card,
      .portal-login__card,
      .site-shell .section,
      .site-shell .detail-list,
      .site-shell .article-layout > article,
      .site-shell .two-column > div,
      .site-shell .results-panel,
      .site-shell .search-screen .filters,
      .site-shell .category-card,
      .site-shell .result-card,
      .site-shell .side-card,
      .site-shell .need-help-card,
      .site-shell .on-this-page-card,
      .site-shell .helpful-card,
      .site-shell .check-card,
      .site-shell .release-card,
      .site-shell .contact-card,
      .site-shell .blog-card,
      .site-shell .post-card,
      .editor-panel,
      .ai-panel,
      .tool-card,
      .seo-card,
      .advanced-panel,
      .plaid-public-card,
      .persona-public-card,
      .extra-repayment-banner,
      .extra-repayment-page .state-card,
      .portal-doc-header,
      .editor-shell .panel,
      .manager-shell .panel,
      .blog-shell .post-card,
      .blog-shell .blog-hero
    ):where(:not(.cancelled-summary-card)) {
    background-color: var(--wl-panel-background-color, var(--pds-surface)) !important;
    border: 1px solid var(--wl-input-border-color, var(--pds-border)) !important;
    border-radius: var(--pds-card-radius) !important;
    box-shadow: var(--pds-card-shadow) !important;
  }

  /* Status cards keep their semantic colors from the component stylesheet. */
  .plexe-design-system :where(.cancelled-summary-card) {
    border-radius: var(--pds-card-radius) !important;
    box-shadow: var(--pds-card-shadow) !important;
  }

  /* A card inside any mapped card is flat, through wrappers and at any depth.
   * Layer priority also prevents legacy hover rules from restoring elevation.
   * Dialogs remain overlays; only their embedded cards are flattened. */
  .plexe-design-system
    :where(
      .modal-content,
      .pds-card,
      .card,
      .plexe-card,
      .cf-card,
      .bg-white.box-shadow,
      .partner-shell-v2__content,
      .agent-shell-v2__content,
      .dashboard-surface,
      .dashboard-summary-card,
      .command-card,
      .analytics-card,
      .insight-card,
      .assignment-center-card,
      .download-report-panel,
      .mobile-dashboard-card,
      .mobile-insight-card,
      .mobile-mini-chart-card,
      .case-summary-card,
      .customer-action-status-card,
      .cancelled-summary-card,
      .application-workflow-filter-card,
      .completed-filter-card,
      .all-kanban-card,
      .content-panel,
      .container-card,
      .account-card,
      .offer-card,
      .disconnect-card,
      .review-card,
      .dashboard-metric-card,
      .repayments-card,
      .early-repayment-card,
      .customer-extra-repayment-card,
      .extra-repayment-detail-card,
      .extra-repayment-summary-card,
      .repayment-items-card,
      .transaction-card,
      .empty-transaction-card,
      .cash-flow-card,
      .associate-card,
      .associates-panel,
      .checkout-card,
      .completion-card,
      .result-summary-card,
      .summary-card,
      .term-card,
      .utility-panel,
      .api-panel,
      .api-stat,
      .portal-event-card,
      .portal-login__card,
      .site-shell .section,
      .site-shell .detail-list,
      .site-shell .article-layout > article,
      .site-shell .two-column > div,
      .site-shell .results-panel,
      .site-shell .search-screen .filters,
      .site-shell .category-card,
      .site-shell .result-card,
      .site-shell .side-card,
      .site-shell .need-help-card,
      .site-shell .on-this-page-card,
      .site-shell .helpful-card,
      .site-shell .check-card,
      .site-shell .release-card,
      .site-shell .contact-card,
      .site-shell .blog-card,
      .site-shell .post-card,
      .editor-panel,
      .ai-panel,
      .tool-card,
      .seo-card,
      .advanced-panel,
      .plaid-public-card,
      .persona-public-card,
      .extra-repayment-banner,
      .extra-repayment-page .state-card,
      .portal-doc-header,
      .editor-shell .panel,
      .manager-shell .panel,
      .blog-shell .post-card,
      .blog-shell .blog-hero
    )
    :where(
      .pds-card,
      .card,
      .plexe-card,
      .cf-card,
      .bg-white.box-shadow,
      .partner-shell-v2__content,
      .agent-shell-v2__content,
      .dashboard-surface,
      .dashboard-summary-card,
      .command-card,
      .analytics-card,
      .insight-card,
      .assignment-center-card,
      .download-report-panel,
      .mobile-dashboard-card,
      .mobile-insight-card,
      .mobile-mini-chart-card,
      .case-summary-card,
      .customer-action-status-card,
      .cancelled-summary-card,
      .application-workflow-filter-card,
      .completed-filter-card,
      .all-kanban-card,
      .content-panel,
      .container-card,
      .account-card,
      .offer-card,
      .disconnect-card,
      .review-card,
      .dashboard-metric-card,
      .repayments-card,
      .early-repayment-card,
      .customer-extra-repayment-card,
      .extra-repayment-detail-card,
      .extra-repayment-summary-card,
      .repayment-items-card,
      .transaction-card,
      .empty-transaction-card,
      .cash-flow-card,
      .associate-card,
      .associates-panel,
      .checkout-card,
      .completion-card,
      .result-summary-card,
      .summary-card,
      .term-card,
      .utility-panel,
      .api-panel,
      .api-stat,
      .portal-event-card,
      .portal-login__card,
      .site-shell .section,
      .site-shell .detail-list,
      .site-shell .article-layout > article,
      .site-shell .two-column > div,
      .site-shell .results-panel,
      .site-shell .search-screen .filters,
      .site-shell .category-card,
      .site-shell .result-card,
      .site-shell .side-card,
      .site-shell .need-help-card,
      .site-shell .on-this-page-card,
      .site-shell .helpful-card,
      .site-shell .check-card,
      .site-shell .release-card,
      .site-shell .contact-card,
      .site-shell .blog-card,
      .site-shell .post-card,
      .editor-panel,
      .ai-panel,
      .tool-card,
      .seo-card,
      .advanced-panel,
      .plaid-public-card,
      .persona-public-card,
      .extra-repayment-banner,
      .extra-repayment-page .state-card,
      .portal-doc-header,
      .editor-shell .panel,
      .manager-shell .panel,
      .blog-shell .post-card,
      .blog-shell .blog-hero
    ),
  .plexe-design-system .pds-card--flat {
    box-shadow: none !important;
  }

  /* Selection and status are semantic states, not elevation. */
  .plexe-design-system :where(.term-card-active, .portal-event-card:has(input:checked)) {
    border-color: var(--pds-primary) !important;
  }
  .plexe-design-system .portal-event-card:has(input:checked) {
    background-color: var(--cf-color-primary-soft, #e9f6ff) !important;
  }
  .plexe-design-system
    :where(
      .dashboard-summary-card.is-active,
      .application-workflow-filter-card.is-active,
      .customer-action-status-card.is-active,
      .completed-filter-card.active
    ) {
    border-color: var(--pds-primary) !important;
    background-color: var(--partner-primary-soft, #dbe6f4) !important;
  }
  .plexe-design-system .cancelled-summary-card.is-active {
    border-width: 2px !important;
    outline: 1px solid var(--pds-primary);
    outline-offset: 2px;
  }
  .plexe-design-system
    :where(
      .pds-card,
      .term-card,
      .cf-card,
      .cancelled-summary-card,
      .dashboard-summary-card,
      .completed-filter-card,
      .application-workflow-filter-card,
      .customer-action-status-card,
      .all-kanban-card,
      .site-shell .result-card,
      .site-shell .blog-card,
      .site-shell .post-card,
      .blog-shell .post-card
    ):focus-visible {
    outline: 2px solid var(--pds-primary) !important;
    outline-offset: 3px;
  }

  /* Preserve the spacing of the original shared roles. */
  .plexe-design-system
    :where(
      .card.p-4,
      .cf-card,
      .pds-card,
      .site-shell .section,
      .site-shell .detail-list,
      .partner-shell-v2__content,
      .agent-shell-v2__content
    ) {
    padding: 24px !important;
  }
}