/* OnlyShows 0.12.4: square activity cells and edge-to-edge mobile chrome. */

@property --mobile-top-cut {
  syntax: "<length>";
  inherits: true;
  initial-value: 58px;
}

@property --mobile-bottom-fade {
  syntax: "<length>";
  inherits: true;
  initial-value: 52px;
}

@media (min-width: 720px) {
  .profile-activity-heading span,
  .profile-activity-years button {
    font-size: 15px;
    line-height: 1.35;
  }

  .profile-activity-years button {
    padding-bottom: 7px;
  }

  .profile-activity-grid {
    grid-template-rows: repeat(7, auto);
  }

  .profile-activity-grid .activity-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 719px) {
  :root {
    --mobile-nav-core-height: 52px;
    --mobile-nav-row-height: calc(var(--mobile-nav-core-height) + env(safe-area-inset-bottom));
  }

  /* The app navigation is a cut edge, not a floating rounded web panel. */
  html body > .mobile-bottom-shell {
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--surface-container-high) 96%, var(--primary) 4%) !important;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--outline-variant) 72%, transparent) !important;
  }

  html body .mobile-bottom-shell .mobile-bottom-nav,
  html body .mobile-bottom-shell .mobile-bottom-nav.is-scroll-hidden,
  html[data-background="prism-mono"] body .mobile-bottom-shell .mobile-bottom-nav,
  html[data-background="prism-violet"] body .mobile-bottom-shell .mobile-bottom-nav {
    height: var(--mobile-nav-row-height) !important;
    min-height: var(--mobile-nav-row-height) !important;
    padding: 4px 12px calc(4px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
  }

  .mobile-bottom-tab,
  .mobile-bottom-tab.active {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .mobile-tab-indicator,
  .mobile-bottom-tab.active .mobile-tab-indicator,
  .mobile-bottom-tab.is-active .mobile-tab-indicator,
  .mobile-bottom-tab[aria-current="page"] .mobile-tab-indicator {
    width: 56px !important;
    min-width: 56px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  .mobile-tab-indicator .app-solid-icon {
    width: 20px;
    height: 20px;
  }

  .mobile-tab-label { display: none !important; }

  #mobileWorkspaceDock {
    bottom: calc(var(--mobile-nav-row-height) + 6px) !important;
  }

  body.mobile-database-tab #mobileWorkspaceDock {
    bottom: calc(var(--mobile-nav-row-height) + var(--mobile-database-row-height) + 6px) !important;
  }

  /* Preserve a full-card landing area above the fixed controls. */
  html body:not(.mobile-database-tab):not(.mobile-profile-tab) #showGrid {
    padding-bottom: calc(52px + var(--mobile-nav-core-height)) !important;
  }

  html body.mobile-database-tab:not(.mobile-profile-tab) #showGrid {
    padding-bottom: calc(106px + var(--mobile-nav-core-height)) !important;
  }

  /* Animate the clipping boundary with the masthead and bottom controls. */
  html body:not(.mobile-profile-tab) #showGrid {
    --mobile-top-cut: var(--mobile-content-cut);
    --mobile-bottom-fade: 52px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--mobile-top-cut) - 1px),
      #000 var(--mobile-top-cut),
      #000 calc(100% - var(--mobile-bottom-fade)),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--mobile-top-cut) - 1px),
      #000 var(--mobile-top-cut),
      #000 calc(100% - var(--mobile-bottom-fade)),
      transparent 100%
    ) !important;
    transition:
      --mobile-top-cut 260ms cubic-bezier(.2, .8, .2, 1),
      --mobile-bottom-fade 260ms cubic-bezier(.2, .8, .2, 1) !important;
  }

  html body.mobile-database-tab:not(.mobile-profile-tab) #showGrid {
    --mobile-bottom-fade: 102px;
  }

  html body:not(.mobile-profile-tab) .library.library-at-bottom #showGrid,
  html body.mobile-chrome-hidden:not(.mobile-profile-tab) #showGrid {
    --mobile-bottom-fade: 0px;
  }

  html body.mobile-chrome-hidden:not(.mobile-profile-tab) #showGrid {
    --mobile-top-cut: 0px;
  }

  /* Align the profile masthead, avatar row and settings card to one gutter. */
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head p,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head h2 {
    left: 18px !important;
  }

  .profile-dialog .profile-summary {
    padding: 10px 0 12px !important;
  }

  .profile-dialog .mobile-profile-hub {
    margin-top: 4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.mobile-profile-tab) #showGrid {
    transition: none !important;
  }
}