/* Shared actions: bold uppercase labels; 40px/12px desktop controls, 44px touch, prominent 36px/12px on desktop and 44px/14px on touch.
 * Loaded only by product shells. Named component families opt in; navigation,
 * provider widgets, marketing and signing canvases are not generic buttons.
 * The important layer gives this small geometry/color contract precedence over
 * legacy page-specific !important rules without escalating selector specificity.
 * Display, visibility, width, ordering and event behavior stay with each page.
 * New controls: .product-btn with data-button-role and data-button-size.
 */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/webfonts/owners-properties/open-sans-latin-variable.woff2") format("woff2");
}

@layer product-buttons {
  @media screen {
    /* Form actions grow with their labels and wrap as a row, rather than
       inheriting narrow legacy grid cells on phones. */
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
      .ow-center-foot,.ow-wizard-foot,.lead-form-footer,.screening-request-foot
    ) {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center;
      gap: 12px;
    }
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
      .ow-center-foot,.ow-wizard-foot,.lead-form-footer,.screening-request-foot
    ) > :is(.ow-btn,.product-btn):not([data-button-preserve]) {
      flex: 0 1 auto !important;
      width: auto !important;
      min-width: 0;
    }
    /* Keep compact hint artwork inside a real target, without an invisible
       hit area overlapping the neighboring field. */
    body[data-product-type]:not(.ow-lease-esign,.ow-esign-fill) .ow-info-i[data-tip] {
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      flex: 0 0 44px;
      vertical-align: middle;
    }
    body[data-product-type]:not(.ow-lease-esign,.ow-esign-fill) .ow-info-i[data-tip]::before {
      content: none;
    }
  }
  /* These two legacy shells render at html zoom:.8. Compensate only the
     action target so 44px remains 44px on screen without resizing the page. */
  body[data-product-buttons="scaled"] { --rb-shell-compensation: 1.25; }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(
    .product-btn, .ow-btn, .ow-btn-outline, .ow-textbtn, .ow-link-btn,
    .ow-icon-btn, .ow-iconbtn, .rt-btn, .btn-brand, .btn-brand-blue,
    .btn-modern, .sl-btn, .sl-btn-icon-grad, .slc-btn, .es-btn
  ) {
    --rb-bg: var(--surface, #fff);
    --rb-fg: var(--interaction-ink, #7b58ea);
    --rb-border: var(--interaction-border, #7b58ea);
    --rb-hover: var(--interaction-bg, #f1eeff);
    --rb-hover-fg: var(--interaction-hover-ink, #6b4ecc);
    --rb-height: 44px;
    --rb-px: 16px;
    --rb-font: calc(var(--ui-rem, 1rem) * .75);
    --rb-line: calc(var(--ui-rem, 1rem) * 1.125);
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center !important;
    align-self: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: var(--rb-height) !important;
    zoom: var(--rb-shell-compensation, 1);
    height: auto !important;
    max-width: 100%;
    padding: var(--rb-py, 10px) var(--rb-px) !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: var(--rb-radius, var(--radius-sm, 6px)) !important;
    background: var(--rb-bg) !important;
    color: var(--rb-fg) !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: var(--rb-font) !important;
    font-weight: 700 !important;
    line-height: var(--rb-line) !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    cursor: pointer;
    transition: background-color var(--interaction-duration, 180ms) ease, border-color var(--interaction-duration, 180ms) ease, color var(--interaction-duration, 180ms) ease !important;

    /* Text wrappers inherit; icon fonts keep their own face. */
    & :where(span:not([class*="fa-"]):not(.fa,.fas,.far,.fab,.material-icons)) {
      font-family: inherit !important;
    }
    & :where(span):not(:where(
      [data-button-preserve], [data-button-preserve] *, [data-tone],
      .ow-pill, .ow-pill *, .badge, .badge *, .status, .status *,
      [class*="fa-"], .fa, .fas, .far, .fab, .material-icons
    )) { color: inherit !important; }
    &:hover:not(:disabled,[aria-disabled="true"]) { background: var(--rb-hover) !important; color: var(--rb-hover-fg) !important; }
    &:focus-visible {
      outline: 2px solid var(--btn-action-ring, var(--interaction-ink, #7b58ea)) !important;
      outline-offset: 3px !important;
    }
    &:focus-visible:not(:disabled,[aria-disabled="true"]) { background: var(--rb-hover) !important; color: var(--rb-hover-fg) !important; }
    &:is(:disabled,[aria-disabled="true"]) {
      opacity: .5 !important;
      cursor: not-allowed !important;
      transform: none !important;
      box-shadow: none !important;
    }
    & > svg {
      width: 18px !important;
      height: 18px !important;
      margin: 0 !important;
      flex-shrink: 0;
    }
  }

  /* App screens: green actions turn a brighter green on hover and keyboard
     focus and a deeper green while pressed, keeping their near-black label.
     A white-label shell sets the --btn-product-* trio on :root, which wins
     over these layered defaults. Public pages keep btn-action.css. */
  :where(:root) {
    --btn-product-hover: #2BE35F;
    --btn-product-hover-fg: #1B1C1A;
    --btn-product-press: #00A82D;
  }
  /* App screens: flat 6px buttons with no inner ring. Public pages keep the
     ring tokens from btn-action.css. */
  body[data-product-buttons] {
    --btn-primary-ring: transparent;
    --btn-secondary-ring: transparent;
    --btn-secondary-ring-hover: transparent;
    --btn-secondary-border: #d0d5dd;
    --btn-primary-hover: var(--btn-product-hover);
    --btn-primary-hover-fg: var(--btn-product-hover-fg);
  }

  /* Roles map existing classes; explicit data roles are available to new UI. */
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(
    .ow-btn.primary, .rt-btn-action, .btn-brand, .btn-brand-blue, .btn-modern,
    .sl-btn-primary, .sl-btn-pill, .sl-btn-icon-grad, .slc-go, .es-btn-primary
  ) {
    --rb-bg: var(--btn-primary-bg, var(--btn-action-bg));
    --rb-fg: var(--btn-primary-fg, var(--btn-action-fg));
    --rb-border: transparent;
    /* A white-label shell sets the hover pair to its own colours, so a
       configured brand never falls back to the default hover color. */
    --rb-hover: var(--btn-primary-hover, var(--btn-action-bg));
    --rb-hover-fg: var(--btn-primary-hover-fg, var(--rb-fg));
    --rb-radius: 6px;
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(
    .ow-btn.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,
    .sl-btn-primary,.sl-btn-pill,.sl-btn-icon-grad,.slc-go,.es-btn-primary,[data-button-role="primary"]
  ) {
    transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease !important;
    box-shadow: inset 0 0 0 3px var(--btn-primary-ring, transparent) !important;
    &:active:not(:disabled,[aria-disabled="true"]) {
      background: var(--btn-product-press, var(--rb-hover)) !important;
      transition-duration: 80ms !important;
    }
  }
  /* Secondary: a flat white button with a neutral edge; the edge and label
     turn purple on hover and keyboard focus. A page that sets its own
     --rb-hover must also set --rb-hover-fg. */
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(
    .product-btn, .ow-btn, .ow-btn-outline, .rt-btn, .sl-btn, .slc-btn, .es-btn
  ):where(:not(
    .primary, .danger, .ow-textbtn, .ow-link-btn, .ow-icon-btn, .ow-iconbtn,
    .rt-btn-action, .rt-btn-quiet, .btn-brand, .btn-brand-blue, .btn-modern,
    .sl-btn-primary, .sl-btn-pill, .sl-btn-icon-grad, .slc-go, .slc-destructive,
    .es-btn-primary, [data-button-role], [data-button-size="icon"]
  )),
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where([data-button-role="secondary"]) {
    --rb-bg: var(--surface, #fff);
    --rb-fg: var(--text-primary, #1e293b);
    --rb-border: var(--interaction-border, #7b58ea);
    --rb-hover: var(--surface, #fff);
    --rb-hover-fg: var(--interaction-ink, #7b58ea);
    --rb-radius: 6px;
    transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease, box-shadow 400ms ease !important;
    border-width: 1px !important;
    box-shadow: inset 0 0 0 3px var(--btn-secondary-ring, transparent) !important;
    &:is(:hover,:focus-visible):not(:disabled,[aria-disabled="true"]) { border-color: var(--interaction-ink, #7b58ea) !important; box-shadow: inset 0 0 0 3px var(--btn-secondary-ring-hover, transparent) !important; }
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(.ow-textbtn,.ow-link-btn,.rt-btn-quiet) {
    --rb-bg: transparent;
    --rb-fg: var(--text-secondary, #586477);
    --rb-border: transparent;
    --rb-hover: var(--surface-alt, #f8fafc);
    --rb-hover-fg: var(--rb-fg);
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(.ow-btn.danger) {
    --rb-bg: transparent;
    --rb-fg: var(--danger);
    --rb-border: var(--danger);
    --rb-hover: var(--danger-bg);
    --rb-hover-fg: var(--rb-fg);
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(.slc-destructive,.ow-btn[data-button-role="danger-confirm"]) {
    --rb-bg: var(--danger);
    --rb-fg: #fff;
    --rb-border: var(--danger);
    --rb-hover: var(--danger);
    --rb-hover-fg: var(--rb-fg);
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) [data-button-role="primary"] {
    --rb-bg: var(--btn-primary-bg, var(--btn-action-bg)); --rb-fg: var(--btn-primary-fg, var(--btn-action-fg));
    --rb-border: transparent; --rb-hover: var(--btn-primary-hover, var(--btn-action-bg));
    --rb-hover-fg: var(--btn-primary-hover-fg, var(--rb-fg)); --rb-radius: 6px;
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) [data-button-role="secondary"] {
    --rb-bg: var(--surface); --rb-fg: var(--text-primary, #1e293b);
    --rb-border: var(--interaction-border, #7b58ea); --rb-hover: var(--surface, #fff);
    --rb-hover-fg: var(--interaction-ink); --rb-radius: 6px;
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) [data-button-role="quiet"] {
    --rb-bg: transparent; --rb-fg: var(--text-secondary);
    --rb-border: transparent; --rb-hover: var(--surface-alt);
    --rb-hover-fg: var(--rb-fg);
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) [data-button-role="danger"] {
    --rb-bg: transparent; --rb-fg: var(--danger);
    --rb-border: var(--danger); --rb-hover: var(--danger-bg);
    --rb-hover-fg: var(--rb-fg);
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) [data-button-role="danger-confirm"] {
    --rb-bg: var(--danger); --rb-fg: #fff;
    --rb-border: var(--danger); --rb-hover: var(--danger);
    --rb-hover-fg: var(--rb-fg);
  }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(.ow-btn.sm,.rt-btn-sm,[data-button-size="compact"]) { --rb-px: 12px; }
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) [data-button-size="prominent"] {
    --rb-height: 44px; --rb-px: 20px; --rb-font: calc(var(--ui-rem, 1rem) * .875); --rb-line: calc(var(--ui-rem, 1rem) * 1.3125);
  }
  body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :where(
    .ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,.product-btn[data-button-size="icon"]
  ) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
  /* Three-dot "more actions" toggles are bare icons: no border or ring at rest,
     on hover or while open; a soft fill shows hover and keyboard focus keeps its outline. */
  body:where(:not(.ow-lease-esign,.ow-esign-fill)) :is(
    .ow-dots, .ow-iconbtn[data-menu-toggle], .ow-icon-btn[data-menu-toggle],
    .ow-rowmenu > summary, .tp-menu > summary, .lc-tenant-menu > summary
  ) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body:where(:not(.ow-lease-esign,.ow-esign-fill)) :is(
    .ow-dots, .ow-iconbtn[data-menu-toggle], .ow-icon-btn[data-menu-toggle],
    .ow-rowmenu > summary, .tp-menu > summary, .lc-tenant-menu > summary
  ):is(:hover, [aria-expanded="true"], details[open] > *) {
    background: var(--interaction-bg, #f1eeff) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :where(
      .product-btn,.ow-btn,.ow-btn-outline,.ow-textbtn,.ow-link-btn,
      .ow-icon-btn,.ow-iconbtn,.rt-btn,.btn-brand,.btn-brand-blue,
      .btn-modern,.sl-btn,.sl-btn-icon-grad,.slc-btn,.es-btn
    ) { transition: none !important; }
  }
  @media print {
    body[data-product-buttons="scaled"] { --rb-shell-compensation: 1; }
  }
}

@layer product-buttons {
  /* Overflow menus keep their hit area and focus ring without a button frame. */
  body[data-product-buttons] :is(.ow-dots, button:has(> .fa-ellipsis), button:has(> .fa-ellipsis-vertical), button:has(> .fa-ellipsis-h), button:has(> .fa-ellipsis-v)) {
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* Dropdown triggers keep a neutral surface; selection belongs to their options. */
@layer product-buttons {
  body[data-product-buttons] :is(select, button[aria-haspopup="listbox"], button[role="combobox"], .slus__trigger):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus, :active) {
    background-color: var(--surface, #fff) !important;
    color: var(--text, #0f172a) !important;
    border-color: var(--interaction-border, #8c6cff) !important;
    box-shadow: none !important;
  }
}

/* Everyday actions follow pointer capability at every viewport width: 40px with 12px bold uppercase labels on desktop.
   The nested important layer wins legacy geometry; role colors remain above. */
@layer product-buttons {
  @layer compact-actions {
    @media screen and (hover: hover) and (pointer: fine) {
      body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :where(
        .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,
        .btn-modern,.sl-btn,.slc-btn,.es-btn
      ):not(:where(
        .danger,.slc-destructive,.ow-textbtn,.ow-link-btn,.rt-btn-quiet,
        .ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,
        [role="combobox"],[aria-haspopup="listbox"],.slus__trigger,
        [data-button-size="icon"],[data-button-size="prominent"],
        [data-button-role="quiet"],[data-button-role="danger"],[data-button-role="danger-confirm"],
        [data-button-preserve],[data-button-preserve] *
      )) {
        --rb-height: 40px !important;
        --rb-font: calc(var(--ui-rem, 1rem) * .75) !important;
        --rb-line: calc(var(--ui-rem, 1rem) * 1.125) !important;
        --ui-body: var(--rb-font) !important;
        --ui-label: var(--rb-font) !important;
        --ui-caption: var(--rb-font) !important;
        --rb-py: 8px !important;
        --rb-px: 14px !important;
        min-height: var(--rb-height) !important;
        padding: var(--rb-py) var(--rb-px) !important;
        font-size: var(--rb-font) !important;
        line-height: var(--rb-line) !important;
        gap: 6px !important;
      }
    }
    /* Main form actions use the prominent size (44px, 14px). Toolbar/filter
       submissions remain everyday actions; explicit compact roles opt out. */
    @media screen {
      body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
        [data-button-size="prominent"],
        .ow-btn.primary.ow-btn-wide,
        :is(.ow-center-foot,.ow-wizard-foot,.lead-form-footer,.showing-invite-footer,
          .ow-form-actions,.rt-form-actions,.ad-form-actions,.modal-footer,.dialog-footer)
          :is(.ow-btn.primary,.rt-btn-action,.sl-btn-primary,.es-btn-primary),
        form:not([role="search"],[method="get" i],[class*="filter"],[id*="filter"])
          :is(button[type="submit"],button:not([type]),input[type="submit"]):is(
            .ow-btn.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,
            .sl-btn-primary,.es-btn-primary,[data-button-role="primary"])
      ):not(:where([data-button-size="compact"],[data-button-preserve],[data-button-preserve] *)) {
        --rb-height: 44px !important;
        --rb-font: calc(var(--ui-rem, 1rem) * .875) !important;
        --rb-line: calc(var(--ui-rem, 1rem) * 1.3125) !important;
        --rb-py: 10px !important;
        --rb-px: 16px !important;
        min-height: var(--rb-height) !important;
        font-size: var(--rb-font) !important;
        line-height: var(--rb-line) !important;
      }
    }
  }
}

/* Size contract: shared buttons keep the agreed type and height over page overrides.
   Bold uppercase labels; desktop everyday 40px/12px, main form actions 44px/14px, touch 44px.
   Text buttons keep their own height. */
@layer product-buttons.compact-actions.size-contract {
  @media screen {
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :where(
      .product-btn,.ow-btn,.ow-btn-outline,.ow-textbtn,.ow-link-btn,.rt-btn,.btn-brand,.btn-brand-blue,
      .btn-modern,.sl-btn,.slc-btn,.es-btn
    ):not(:where(.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,[data-button-size="icon"],[data-button-preserve],[data-button-preserve] *)) {
      font-size: calc(var(--ui-rem, 1rem) * .75) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.125) !important;
      font-weight: 700 !important;
      letter-spacing: .04em !important;
      text-transform: uppercase !important;
    }
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :where(
      .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn,.slc-btn,.es-btn
    ):not(:where(.ow-textbtn,.ow-link-btn,.rt-btn-quiet,.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,[data-button-size="icon"],[data-button-role="quiet"],[data-button-preserve],[data-button-preserve] *)) {
      min-height: 44px !important;
      height: auto !important;
    }
  }
  @media screen and (hover: hover) and (pointer: fine) {
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :where(
      .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn,.slc-btn,.es-btn
    ):not(:where(.ow-textbtn,.ow-link-btn,.rt-btn-quiet,.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,
      [role="combobox"],[aria-haspopup="listbox"],.slus__trigger,[data-button-size="icon"],[data-button-role="quiet"],
      [data-button-preserve],[data-button-preserve] *)) {
      min-height: 40px !important;
    }
  }
  @media screen {
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
      [data-button-size="prominent"],
      .ow-btn.primary.ow-btn-wide,
      :is(.ow-center-foot,.ow-wizard-foot,.lead-form-footer,.showing-invite-footer,
        .ow-form-actions,.rt-form-actions,.ad-form-actions,.modal-footer,.dialog-footer)
        :is(.ow-btn.primary,.rt-btn-action,.sl-btn-primary,.es-btn-primary),
      form:not([role="search"],[method="get" i],[class*="filter"],[id*="filter"])
        :is(button[type="submit"],button:not([type]),input[type="submit"]):is(
          .ow-btn.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,
          .sl-btn-primary,.es-btn-primary,[data-button-role="primary"])
    ):not(:where([data-button-size="compact"],[data-button-preserve],[data-button-preserve] *)) {
      font-size: calc(var(--ui-rem, 1rem) * .875) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.3125) !important;
      min-height: 44px !important;
      padding-block: 10px !important;
    }
  }
}

/* Compact prominent actions (owner, Option B): on a mouse or trackpad, prominent
   and main form actions are 36px with 12px labels; touch screens keep 44px/14px. */
@layer product-buttons {
  @layer compact-actions {
    @media screen and (hover: hover) and (pointer: fine) {
      body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :is(
        [data-button-size="prominent"],
        .ow-btn.primary.ow-btn-wide,
        :is(.ow-center-foot,.ow-wizard-foot,.lead-form-footer,.showing-invite-footer,
          .ow-form-actions,.rt-form-actions,.ad-form-actions,.modal-footer,.dialog-footer)
          :is(.ow-btn.primary,.rt-btn-action,.sl-btn-primary,.es-btn-primary),
        :is(.ow-wizard-foot,.ow-center-foot) > .ow-btn:not(.primary,.ow-link-btn,.ow-textbtn),
        form:not([role="search"],[method="get" i],[class*="filter"],[id*="filter"])
          :is(button[type="submit"],button:not([type]),input[type="submit"]):is(
            .ow-btn.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,
            .sl-btn-primary,.es-btn-primary,[data-button-role="primary"])
      ):not(:where([data-button-size="compact"],[data-button-preserve],[data-button-preserve] *)) {
        --rb-height: 36px !important;
        --rb-font: calc(var(--ui-rem, 1rem) * .75) !important;
        --rb-line: calc(var(--ui-rem, 1rem) * 1.125) !important;
        --rb-py: 8px !important;
        --rb-px: 12px !important;
        min-height: var(--rb-height) !important;
        font-size: var(--rb-font) !important;
        line-height: var(--rb-line) !important;
      }
    }
  }
  /* Prominent secondary actions (owner): white with a purple edge and a dark
     label at rest; the label turns purple on hover and keyboard focus.
     Main actions stay green at rest. */
  body[data-product-buttons]:where(:not(.ow-lease-esign,.ow-esign-fill)) :is(
    [data-button-size="prominent"],
    :is(.ow-wizard-foot,.ow-center-foot) > .ow-btn:not(.primary,.ow-link-btn,.ow-textbtn)
  ):not(:where(.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn-primary,.es-btn-primary,
    [data-button-role="primary"],.danger,[data-button-role="danger"],[data-button-role="danger-confirm"],
    [data-button-size="compact"],[data-button-preserve],[data-button-preserve] *)) {
    --rb-bg: var(--surface, #fff);
    --rb-fg: var(--text-primary, #1e293b);
    --rb-border: var(--interaction-border, #7b58ea);
    --rb-hover: var(--surface, #fff);
    --rb-hover-fg: var(--interaction-ink, #7b58ea);
    &:is(:hover,:focus-visible):not(:disabled,[aria-disabled="true"]) { border-color: var(--interaction-ink, #7b58ea) !important; }
  }
}
@layer product-buttons.compact-actions.size-contract {
  @media screen and (hover: hover) and (pointer: fine) {
    body[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :is(
      [data-button-size="prominent"],
      .ow-btn.primary.ow-btn-wide,
      :is(.ow-center-foot,.ow-wizard-foot,.lead-form-footer,.showing-invite-footer,
        .ow-form-actions,.rt-form-actions,.ad-form-actions,.modal-footer,.dialog-footer)
        :is(.ow-btn.primary,.rt-btn-action,.sl-btn-primary,.es-btn-primary),
      :is(.ow-wizard-foot,.ow-center-foot) > .ow-btn:not(.primary,.ow-link-btn,.ow-textbtn),
      form:not([role="search"],[method="get" i],[class*="filter"],[id*="filter"])
        :is(button[type="submit"],button:not([type]),input[type="submit"]):is(
          .ow-btn.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,
          .sl-btn-primary,.es-btn-primary,[data-button-role="primary"])
    ):not(:where([data-button-size="compact"],[data-button-preserve],[data-button-preserve] *)) {
      font-size: calc(var(--ui-rem, 1rem) * .75) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.125) !important;
      min-height: 36px !important;
      padding-block: 8px !important;
    }
  }
}

/* Landlord and tenant app buttons (owner pick, upgrade-195): pill shape; main actions
   are a green-to-light-green gradient with a near-black label that slides to
   its lighter end on hover; secondary actions are white with a purple edge
   and label, filling purple with a white label on hover; delete is pale red and turns solid red on hover.
   The gradient applies to the default brand only (data-action-tones), so a
   white-label shell keeps its own colours. Unlayered page tokens still win.
   :not(#_) lifts these above the shared role rules without page overrides. */
@layer product-buttons {
  body:is(.ow,[data-tenant-icons]):not(#_)[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
    .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn,.slc-btn,.es-btn
  ):not(.ow-textbtn,.ow-link-btn,.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,[data-button-size="icon"],[data-button-preserve],[data-button-preserve] *) {
    --rb-radius: 999px;
  }
  body:is(.ow,[data-tenant-icons]):not(#_)[data-action-tones][data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
    .ow-btn.primary,.rt-btn-action,.btn-brand,.btn-brand-blue,.btn-modern,
    .sl-btn-primary,.sl-btn-pill,.slc-go,.es-btn-primary,[data-button-role="primary"]
  ) {
    --rb-bg: linear-gradient(90deg, #00B330, #2FD458, #6BE36A) 0 0 / 200% 100%;
    --rb-hover: linear-gradient(90deg, #00B330, #2FD458, #6BE36A) 100% 0 / 200% 100%;
    --rb-fg: #1B1C1A;
    --rb-hover-fg: #1B1C1A;
    --rb-border: transparent;
    --btn-product-press: var(--rb-hover);
    transition: background-position 500ms ease, color 400ms ease, filter 80ms ease !important;
    &:active:not(:disabled,[aria-disabled="true"]) { filter: brightness(.94) !important; }
  }
  body:is(.ow,[data-tenant-icons]):not(#_)[data-action-tones][data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
    .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.sl-btn,.slc-btn,.es-btn,[data-button-role="secondary"]
  ):not(
    .primary,.danger,.ow-textbtn,.ow-link-btn,.ow-icon-btn,.ow-iconbtn,.rt-btn-action,.rt-btn-quiet,
    .btn-brand,.btn-brand-blue,.btn-modern,.sl-btn-primary,.sl-btn-pill,.sl-btn-icon-grad,.slc-go,
    .slc-destructive,.es-btn-primary,[data-button-role="primary"],[data-button-role="quiet"],
    [data-button-role="danger"],[data-button-role="danger-confirm"],[data-button-size="icon"],
    [data-button-preserve],[data-button-preserve] *
  ) {
    --rb-bg: #fff;
    --rb-border: #6B48E0;
    --rb-fg: #6B48E0;
    --rb-hover: #6B48E0;
    --rb-hover-fg: #fff;
    &:is(:hover,:focus-visible):not(:disabled,[aria-disabled="true"]) { border-color: #6B48E0 !important; }
  }
  body:is(.ow,[data-tenant-icons]):not(#_)[data-action-tones][data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(.ow-btn.danger,[data-button-role="danger"]) {
    --rb-bg: #FDE8EA;
    --rb-border: #FDE8EA;
    --rb-fg: #B01F30;
    --rb-hover: var(--danger, #D8293E);
    --rb-hover-fg: #fff;
    &:is(:hover,:focus-visible):not(:disabled,[aria-disabled="true"]) { border-color: var(--danger, #D8293E) !important; }
  }
}
/* Landlord app sizes: 40px with 13px labels on desktop, 44px with 14px on
   touch, for everyday and prominent actions alike. Text buttons keep 12px. */
@layer product-buttons.compact-actions.size-contract {
  @media screen {
    body:is(.ow,[data-tenant-icons]):not(#_)[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill) :is(
      .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn,.slc-btn,.es-btn
    ):not(.ow-textbtn,.ow-link-btn,.rt-btn-quiet,.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,
      [role="combobox"],[aria-haspopup="listbox"],.slus__trigger,[data-button-size="icon"],[data-button-size="compact"],
      [data-button-role="quiet"],[data-button-preserve],[data-button-preserve] *) {
      font-size: calc(var(--ui-rem, 1rem) * .875) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.3125) !important;
      min-height: 44px !important;
      padding-inline: 18px !important;
    }
  }
  @media screen and (hover: hover) and (pointer: fine) {
    body:is(.ow,[data-tenant-icons]):not(#_)[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :is(
      .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn,.slc-btn,.es-btn
    ):not(.ow-textbtn,.ow-link-btn,.rt-btn-quiet,.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,
      [role="combobox"],[aria-haspopup="listbox"],.slus__trigger,[data-button-size="icon"],[data-button-size="compact"],
      [data-button-role="quiet"],[data-button-preserve],[data-button-preserve] *) {
      font-size: calc(var(--ui-rem, 1rem) * .8125) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.1875) !important;
      min-height: 40px !important;
      padding-block: 8px !important;
    }
  }
}

/* Small buttons and text actions in the landlord and tenant apps: on a mouse or
   trackpad a small button (.sm, .rt-btn-sm, data-button-size="small") is 32px
   with a 12px label, for cards, banners and table rows, and a text action is
   32px tall. Page and form actions stay 40px; touch screens keep 44px. */
@layer product-buttons.compact-actions.size-contract {
  @media screen and (hover: hover) and (pointer: fine) {
    body:is(.ow,[data-tenant-icons]):not(#_)[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :is(
      .product-btn,.ow-btn,.ow-btn-outline,.rt-btn,.btn-brand,.btn-brand-blue,.btn-modern,.sl-btn,.slc-btn,.es-btn
    ):is(.sm,.rt-btn-sm,[data-button-size="small"]):not(.ow-textbtn,.ow-link-btn,.rt-btn-quiet,.ow-icon-btn,.ow-iconbtn,.sl-btn-icon-grad,
      [role="combobox"],[aria-haspopup="listbox"],.slus__trigger,[data-button-size="icon"],
      [data-button-role="quiet"],[data-button-preserve],[data-button-preserve] *) {
      font-size: calc(var(--ui-rem, 1rem) * .75) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.125) !important;
      min-height: 32px !important;
      padding: 6px 14px !important;
    }
    body:is(.ow,[data-tenant-icons]):not(#_)[data-product-buttons]:not(.ow-lease-esign,.ow-esign-fill,.ow-in-app,.rt-in-app) :is(
      .ow-textbtn,.ow-link-btn,.rt-btn-quiet
    ):not(.ow-icon-btn,.ow-iconbtn,[data-button-size="icon"],[data-button-preserve],[data-button-preserve] *) {
      min-height: 32px !important;
      padding-block: 6px !important;
    }
  }
}
/* Row, card and banner actions with their own classes follow the same sizes.
   A list row's next step (.lp-next) is a small secondary button; the recap
   card action is a small outline button; settings row actions are text actions. */
@layer product-buttons {
  body.ow[data-product-buttons] :is(#lp,.lp-card) td :is(a,button).lp-next {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--interaction-border, #6B48E0) !important;
    border-radius: var(--radius-sm, 6px) !important;
    background: var(--surface, #fff) !important;
    color: var(--interaction-ink, #6B48E0) !important;
    font: 700 calc(var(--ui-rem, 1rem) * .875)/calc(var(--ui-rem, 1rem) * 1.3125) "Open Sans", Arial, sans-serif !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer;
    transition: background-color 400ms ease, color 400ms ease !important;
  }
  body.ow[data-product-buttons] :is(#lp,.lp-card) td :is(a,button).lp-next:is(:hover,:focus-visible):not(:disabled) {
    background: var(--interaction-ink, #6B48E0) !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  body.ow[data-action-tones][data-product-buttons] :is(#lp,.lp-card) td :is(a,button).lp-next {
    border-color: #6B48E0 !important;
    /* Half the one-line height: a pill on one line, soft corners when a label wraps. */
    border-radius: 22px !important;
    color: #6B48E0 !important;
  }
  body.ow[data-action-tones][data-product-buttons] :is(#lp,.lp-card) td :is(a,button).lp-next:is(:hover,:focus-visible):not(:disabled) {
    background: #6B48E0 !important;
    color: #fff !important;
  }
  body.ow[data-product-buttons] .recap-card .recap-card-btn {
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 6px 14px !important;
    font: 700 calc(var(--ui-rem, 1rem) * .875)/calc(var(--ui-rem, 1rem) * 1.3125) "Open Sans", Arial, sans-serif !important;
    letter-spacing: .04em !important;
  }
  @media screen and (hover: hover) and (pointer: fine) {
    body.ow[data-product-buttons]:not(.ow-in-app) :is(#lp,.lp-card) td :is(a,button).lp-next,
    body.ow[data-product-buttons]:not(.ow-in-app) .recap-card .recap-card-btn {
      min-height: 32px !important;
      font-size: calc(var(--ui-rem, 1rem) * .75) !important;
      line-height: calc(var(--ui-rem, 1rem) * 1.125) !important;
    }
    body.ow[data-action-tones][data-product-buttons]:not(.ow-in-app) :is(#lp,.lp-card) td :is(a,button).lp-next {
      border-radius: 16px !important;
    }
    body.ow[data-product-buttons]:not(.ow-in-app) :is(.sp-row-action,.acct-settings-action,.ps-action) {
      min-height: 32px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body.ow[data-product-buttons] :is(#lp,.lp-card) td :is(a,button).lp-next { transition: none !important; }
  }
}

/* Prime ribbon (common.prime_ribbon): the GPT bookmark hangs from the top edge
   of a button or card that needs Rentari Prime, for Basic landlords only. The
   gap span keeps the label clear of it without touching the padding contract. */
.has-prime-ribbon { position: relative; }
.prime-ribbon-gap { display: inline-block; width: 14px; flex: none; }
.prime-ribbon { position: absolute; top: -3px; right: 9px; width: 15px; height: 20px; pointer-events: none; }
.prime-ribbon-lg { top: -4px; right: 14px; width: 24px; height: 32px; }