/* Scoped overrides retain the exported desktop layout above 1400px.
   !important is limited to properties supplied inline by the original export. */
.activity-page .activity-tablet-header { display: none; }

@media (max-width: 1400px) {
  body.activity-page { display: block; min-height: 100svh; }

  .activity-page > .export-109 {
    --icon-size: clamp(22px, 6vw, 32px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 100svh;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-left), env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .activity-page .export-4 {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: auto;
    height: auto;
    min-height: 60px;
    margin-inline: -12px;
    padding: 4px 12px;
  }

  .activity-page .export-4 > div {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 44px;
    height: 44px;
    max-width: 100%;
  }

  .activity-page .export-4 svg {
    position: static;
    width: auto;
    height: var(--icon-size);
    max-width: 100%;
  }

  .activity-page :is([data-pencil-name="Activity log Header"], [data-pencil-name="Notifications Header"]) {
    position: static !important;
    order: 1;
    margin-block: 16px;
    font-size: clamp(1.25rem, 5.64vw, 1.5rem) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .activity-page [data-pencil-name="activity log menu"] {
    position: static !important;
    order: 2;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .activity-page [data-pencil-name="all notifications"] {
    position: static !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .activity-page [data-pencil-name="all notifications"] > div {
    height: auto !important;
    width: 100%;
  }

  .activity-page [data-pencil-name="notification"] {
    position: static;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    width: 100%;
    height: auto;
  }

  .activity-page [data-pencil-name="notification"] > [data-pencil-name="user ppf"] {
    position: relative !important;
    inset: auto !important;
    grid-area: 1 / 1;
    width: 44px !important;
    height: 44px !important;
  }

  .activity-page [data-pencil-name="user ppf"] > div {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .activity-page [data-pencil-name="text and time"] {
    position: static !important;
    grid-area: 1 / 2;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    gap: 2px !important;
  }

  .activity-page [data-pencil-name="text and time"] > div {
    width: 100% !important;
    min-width: 0;
    font-size: clamp(0.875rem, 4.1vw, 1.125rem) !important;
    line-height: 1.45 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .activity-page [data-pencil-name="text and time"] > .export-168 {
    font-size: clamp(0.75rem, 3.59vw, 1rem) !important;
  }
}

@media (min-width: 601px) and (max-width: 1400px) {
  .activity-page :is([data-pencil-name="Activity log Header"], [data-pencil-name="Notifications Header"]) { font-size: 22px !important; }
  .activity-page [data-pencil-name="text and time"] > div { font-size: 17px !important; }
  .activity-page [data-pencil-name="text and time"] > .export-168 { font-size: 15px !important; }

  .activity-page > .export-109 {
    padding-top: calc(72px + env(safe-area-inset-top));
    padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .activity-page .activity-tablet-header {
    --logo-size: 44px;
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
  }

  .activity-page .activity-tablet-header > div {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    gap: 4px;
  }

  .activity-page .activity-tablet-header > [data-pencil-name="NSM"] { order: -1; }

  .activity-page .activity-tablet-header .export-67 > div {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }

  .activity-page .activity-tablet-header svg { position: static; width: 32px; height: auto; }
  .activity-page .activity-tablet-header .export-148 { background-size: 0 0; border: 0; }
  .activity-page .activity-tablet-header .export-148::before {
    content: "";
    width: 32px;
    height: 32px;
    background: inherit;
    background-size: cover;
    border: 1px solid #f2f2f2;
    border-radius: 50%;
  }

  .activity-page .export-4 {
    position: fixed;
    inset: auto;
    top: calc(8px + env(safe-area-inset-top));
    right: 168px;
    z-index: 21;
    width: clamp(220px, 48vw, 492px);
    min-height: 44px;
    margin: 0;
    padding: 0;
  }

  .activity-page .activity-tablet-header::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 12px;
    background: #0f0f0f;
  }
}

@media (max-width: 600px) {
  [data-pencil-name="NSM activity log page mobile"] > .export-4,
  [data-pencil-name="Notifications Page"] > .export-4 {
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 20;
  }
}