/* Explicit card roles keep selections, financial tiles and provider documents
   in their owning systems. Record cards retain their individual links/actions.
   Public pages share interaction colors while retaining their own type/layout. */
@layer product-cards {
  :root { --card-border-width: 2px; }
  @media screen {
    :where([data-card-role], .product-card):not(:where(
      [data-card-preserve], [data-card-preserve] *, [data-type-preserve], [data-type-preserve] *,
      [contenteditable], [contenteditable] *, .document-preview, .document-preview *,
      .lease-document, .lease-document *, .ow-editor, .ow-editor *,
      .ow-lease-esign *, .ow-esign-fill *, [role="radio"], [role="checkbox"]
    )) {
      border: var(--card-border-width) solid var(--border-strong, #cbd5e1) !important;
      border-radius: var(--radius-card, 16px) !important;
      min-width: 0;
      /* Reset at every card boundary so parent feedback cannot leak into a
         nested card. Titles retain their owning styles until this is set. */
      --card-title-feedback: initial;
      transition: border-color var(--interaction-duration, 180ms) ease !important;

      &:where([data-card-role="link"], [data-card-role="record"]) {
        background: var(--surface, #fff) !important;
        text-decoration: none;
        box-shadow: var(--card-shadow, none) !important;
      }
      &:where([data-card-role="link"], [data-card-role="record"]) {
        & [data-card-title] {
          transition: color var(--interaction-duration, 180ms) ease !important;
        }
        &:is(:hover, :focus-visible, :has(:focus-visible)):not(.is-disabled, [aria-disabled="true"]) {
          --card-title-feedback: var(--interaction-ink, #7b58ea);
          border-color: var(--interaction-border, #7b58ea) !important;
          transform: none !important;
          /* Preserve a card's resting shadow without an animated lift. */
          box-shadow: var(--card-shadow, none) !important;
        }
      }
      &:where([data-card-role="link"]):focus-visible {
        outline: 2px solid var(--interaction-ink, #7b58ea) !important;
        outline-offset: 3px !important;
      }
      &:where([data-card-role="static"]) {
        /* Information panels must not suggest that their blank area opens. */
        cursor: auto;
        background: var(--card-background, var(--surface, #fff)) !important;
        transform: none !important;
        box-shadow: var(--card-shadow, none) !important;
      }
    }

    [data-card-title]:not(:where(
      [data-card-band="lead"] *, [data-card-preserve], [data-card-preserve] *,
      [data-type-preserve], [data-type-preserve] *, [data-type-role="address"],
      .ow-lease-esign *, .ow-esign-fill *
    )) { color: var(--card-title-feedback, revert-layer) !important; }

    /* Existing operational information panels share the neutral card edge.
       Their layout, colored headers and controls remain owned by each page. */
    body[data-product-type]:not(.ow-lease-esign,.ow-esign-fill) :where(
      .ow-card, .ow-help-card, .ow-partner, .rs-card, .mc-card, .ls-card,
      .acct-settings-card, .settings-company-card, .sp-section-card
    ):not(:where(
      [data-card-role], [data-card-preserve], [data-card-preserve] *,
      [data-type-preserve], [data-type-preserve] *, [data-tone], [data-pastel-card],
      [role="alert"], [role="status"], [role="radio"], [role="checkbox"],
      .danger, .warning, .success, .ow-set-danger, .ow-choice, label,
      .document-preview *, .lease-document *, .ow-editor *
    )) {
      border: var(--card-border-width) solid var(--border-strong, #cbd5e1) !important;
      border-radius: var(--radius-card, 16px) !important;
    }

    /* Legacy operational card shells adopt the same edge width without
       changing status colors, hover colors, internal dividers or controls.
       A borderless shell stays borderless because its border style is untouched. */
    body[data-product-type]:not(.ow-lease-esign,.ow-esign-fill) :where(
      [data-card-role], .product-card, .card, .ow-card, .ow-help-card, .ow-partner,
      .ow-center-card, .ow-compact-card, .ow-forms-card, .ow-gate-card,
      .ow-pay-card, .ow-pay-tile, .ow-preview-card, .ow-prop-card, .ow-rep-card,
      .ow-sd, .ow-set-card, .ow-subcard, .ow-table-card, .ow-tile, .ow-with-card,
      .ow-fieldset, .ow-type-card, .ow-typetile,
      .acct-card, .acct-form-card, .acct-settings-card, .acct-wait-card, .acct-stat,
      .ad-card, .attention-card, .background-card, .briefing-card, .goals-card,
      .co-brand-card, .cf-lf-card, .description-ai-card, .invite-list-card,
      .lb-card, .lb-section-card, .lc-checklist-card, .ld-form-tile, .lease-card,
      .lf-card, .ls-card, .lw-lease-card, .market-card, .marketing-empty-card,
      .marketing-listing-card, .mc-card, .ofr-card, .oi-card, .op-card,
      .op-stat-tile, .pay-card, .photos-listing-card, .photos-section, .pp-card,
      .property-card, .ps-card, .pt--card, .pt-side-card, .published-card,
      .rn-stat, .rs-card, .rt-card, .settings-company-card, .size-card,
      .sp-section-card, .sr-detail-card, .sr-record-tile, .sr-score-card,
      .sr-verification-card, .vacancy-card, .work-email-card,
      .ow-checklist-boxed > li, .ow-listing-head-row, .overview-view .panel,
      .dx .tiles, .dx .qlist, .listing-edit-body
    ):not(:where(
      [data-card-preserve], [data-card-preserve] *, [contenteditable],
      [contenteditable] *, .document-preview, .document-preview *,
      .lease-document, .lease-document *, .ow-editor, .ow-editor *,
      [role="radio"], [role="checkbox"], label, .ow-choice,
      .availability-choice-card, .rules-tile
    )) { border-width: var(--card-border-width) !important; }

    /* Shared standalone cards; dense workspace rows keep their existing grid. */
    .product-card {
      padding: 24px;
      background: var(--surface, #fff);
    }
    .product-card[data-card-density="compact"] { padding: 16px; }
    body[data-product-type] [data-card-title]:not(:where(
      [data-card-preserve] *, [data-type-preserve] *, [data-type-role="address"],
      .document-preview *, .lease-document *, .ow-editor *,
      .ow-lease-esign *, .ow-esign-fill *
    )) {
      font-family: var(--ui-font, "Open Sans", Arial, sans-serif) !important;
      font-size: var(--ui-card-title, 1.25rem) !important;
      font-weight: 600 !important;
      line-height: 1.35 !important;
      overflow-wrap: anywhere;
    }
    body[data-product-type] [data-card-description] {
      font-size: var(--ui-body, 1rem) !important;
      line-height: 1.5 !important;
      max-width: 65ch;
      overflow-wrap: anywhere;
    }
    body[data-product-type] [data-card-meta] {
      font-size: .8125rem !important;
      line-height: 1.5 !important;
    }
    @media (max-width: 640px) {
      .product-card { padding: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-card-role], [data-card-title], .product-card { transition: none !important; }
    }
    @media (forced-colors: active) {
      [data-card-role="link"]:is(:hover, :focus-visible),
      [data-card-role="record"]:has(:focus-visible) { border-color: Highlight !important; }
    }
  }
}