/*
 * REDICO mega menu clarity — 2026-11-09.
 * Global menu scope: html body #rpm-dialog only.
 * Reuses the current palette and redicoReadability cascade layer.
 * Native details, [hidden], DOM order, URLs and fitOffers() remain intact.
 */
@layer redicoReadability {
  /* The existing quote control is moved by the decorator, never duplicated. */
  html body #rpm-dialog .rpm-head:has(> .rdx-menu-quote) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 44px !important;
    grid-template-areas: "heading quote close" !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html body #rpm-dialog .rpm-head > .rpm-heading {
    grid-area: heading !important;
    min-width: 0 !important;
  }

  html body #rpm-dialog .rpm-head > .rdx-menu-quote {
    grid-area: quote !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #rpm-dialog .rpm-head .rdx-menu-quote-button {
    min-height: 44px !important;
    width: auto !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  html body #rpm-dialog .rpm-head > .rpm-close {
    grid-area: close !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Keep group boundaries visible even when every group is collapsed. */
  html body #rpm-dialog .rpm-grid,
  html body #rpm-dialog .rpm-about {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  html body #rpm-dialog .rpm-column {
    gap: 16px !important;
  }

  html body #rpm-dialog .rpm-group {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 12px !important;
    background: var(--pm-paper) !important;
  }

  html body #rpm-dialog .rpm-group > summary {
    align-items: center !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-bottom: 0 !important;
    border-radius: 11px !important;
    background: var(--pm-soft) !important;
    color: var(--pm-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body #rpm-dialog .rpm-group[open] > summary {
    border-bottom: 1px solid var(--pm-line) !important;
    border-radius: 11px 11px 0 0 !important;
    box-shadow: inset 3px 0 var(--pm-red) !important;
  }

  html body #rpm-dialog .rpm-group > summary:has(> .rmu-group-title) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 12px !important;
    grid-template-areas: "title count icon" !important;
    gap: 10px !important;
  }

  html body #rpm-dialog .rmu-group-title {
    grid-area: title !important;
    min-width: 0 !important;
  }

  html body #rpm-dialog .rmu-group-count {
    grid-area: count !important;
    justify-self: start !important;
    padding: 3px 6px !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 6px !important;
    background: var(--pm-paper) !important;
    color: var(--pm-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  html body #rpm-dialog
    .rpm-group > summary:has(> .rmu-group-title)::after {
    grid-area: icon !important;
  }

  html body #rpm-dialog .rpm-group > ul {
    margin: 0 !important;
    padding: 6px 8px 8px !important;
  }

  /* Avoid the legacy negative margins and 26–28px link rows. */
  html body #rpm-dialog .rpm-link {
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body #rpm-dialog .rpm-group > .rpm-overview {
    margin: 0 8px 8px !important;
    border-top: 1px solid var(--pm-line) !important;
    border-radius: 0 0 8px 8px !important;
    font-weight: 600 !important;
  }

  html body #rpm-dialog .rpm-link:is(:hover, :focus-visible, :active) {
    background: var(--pm-soft) !important;
    transform: none !important;
  }

  html body #rpm-dialog .rpm-link[aria-current="page"] {
    background: var(--pm-soft) !important;
    box-shadow: inset 3px 0 var(--pm-red) !important;
    font-weight: 650 !important;
  }

  /* Apply the same hierarchy to the Learning and Company groups. */
  html body #rpm-dialog .rpm-about-group {
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 12px !important;
    background: var(--pm-paper) !important;
  }

  html body #rpm-dialog .rpm-about-group > h3 {
    margin: 0 0 8px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--pm-line) !important;
    color: var(--pm-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
  }

  /* Selected tabs use shape, weight and an inset marker as well as color. */
  html body #rpm-dialog .rpm-tabs {
    gap: 8px !important;
    padding-block: 6px 10px !important;
  }

  html body #rpm-dialog .rpm-tab {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 10px !important;
    background: var(--pm-paper) !important;
    color: var(--pm-muted) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  html body #rpm-dialog .rpm-tab::after {
    display: none !important;
  }

  html body #rpm-dialog .rpm-tab:is(:hover, :focus-visible, :active) {
    background: var(--pm-soft) !important;
    color: var(--pm-ink) !important;
  }

  html body #rpm-dialog .rpm-tab[aria-selected="true"] {
    border-color: var(--pm-red) !important;
    background: var(--pm-soft) !important;
    color: var(--pm-red) !important;
    box-shadow: inset 0 -2px var(--pm-red) !important;
    font-weight: 700 !important;
  }

  /* Give search a distinct area while leaving filtering and status to JS. */
  html body #rpm-dialog .rpm-searchbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 12px !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 12px !important;
    background: var(--pm-soft) !important;
  }

  html body #rpm-dialog .rmu-search-label {
    grid-column: 1 / -1 !important;
    color: var(--pm-ink) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
  }

  html body #rpm-dialog .rpm-search {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 8px !important;
    background: var(--pm-paper) !important;
    color: var(--pm-ink) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html body #rpm-dialog .rpm-search::placeholder {
    color: var(--pm-muted) !important;
    opacity: 1 !important;
  }

  html body #rpm-dialog .rpm-search:focus {
    border-color: var(--pm-red) !important;
  }

  html body #rpm-dialog .rpm-all {
    justify-self: end !important;
    min-height: 44px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  html body #rpm-dialog .rpm-status:not(:empty) {
    margin: 14px 0 0 !important;
    padding: 10px 12px !important;
    border-inline-start: 3px solid var(--pm-red) !important;
    border-radius: 0 8px 8px 0 !important;
    background: var(--pm-soft) !important;
    color: var(--pm-ink) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  html body #rpm-dialog
    :is(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pm-red) !important;
    outline-offset: 3px !important;
  }

  @media (max-width: 1100px) {
    html body #rpm-dialog .rpm-group > summary:has(> .rmu-group-title) {
      grid-template-columns: minmax(0, 1fr) 12px !important;
      grid-template-areas: "title icon" "count icon" !important;
      gap: 5px 10px !important;
    }
  }

  @media (max-width: 760px) {
    html body #rpm-dialog .rpm-head:has(> .rdx-menu-quote) {
      grid-template-columns: minmax(0, 1fr) 44px !important;
      grid-template-areas: "heading close" "quote quote" !important;
      gap: 10px !important;
    }

    html body #rpm-dialog .rpm-head .rdx-menu-quote-button {
      width: 100% !important;
    }

    html body #rpm-dialog .rpm-grid,
    html body #rpm-dialog .rpm-about {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    html body #rpm-dialog .rpm-link {
      min-height: 44px !important;
      padding-block: 11px !important;
    }

    html body #rpm-dialog .rpm-tab {
      padding-inline: 10px !important;
    }

    html body #rpm-dialog .rpm-searchbar {
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 8px !important;
    }

    html body #rpm-dialog .rmu-search-label {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    html body #rpm-dialog .rpm-search {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
    }

    html body #rpm-dialog .rpm-all {
      grid-column: 2 !important;
      grid-row: 1 !important;
      min-height: 32px !important;
      padding: 4px 0 4px 6px !important;
      font-size: 12px !important;
    }
  }

  @media (max-width: 600px) {
    html body #rpm-dialog .rpm-tabs {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body #rpm-dialog .rpm-tab {
      width: 100% !important;
      text-align: center !important;
    }
  }
}