/* OnlyShows 0.12.1: month-long recents, calm mobile navigation and profile activity. */

.profile-activity-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.profile-activity-heading h3 { margin: 0; }

.profile-activity-heading span {
  color: var(--on-surface-variant);
  font-size: 11px;
  text-align: right;
}

.profile-activity-frame {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 72%, transparent);
  border-radius: 18px;
  background: var(--surface-container-low);
}

.profile-activity-grid {
  display: grid;
  grid-template-rows: repeat(7, 8px);
  grid-auto-flow: column;
  grid-auto-columns: 8px;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
}

.activity-cell,
.profile-activity-legend i {
  display: block;
  border-radius: 2px;
  background: color-mix(in srgb, var(--outline-variant) 52%, transparent);
}

.activity-cell[data-level="1"], .profile-activity-legend i[data-level="1"] { background: color-mix(in srgb, var(--primary) 32%, var(--surface-container-high)); }
.activity-cell[data-level="2"], .profile-activity-legend i[data-level="2"] { background: color-mix(in srgb, var(--primary) 52%, var(--surface-container-high)); }
.activity-cell[data-level="3"], .profile-activity-legend i[data-level="3"] { background: color-mix(in srgb, var(--primary) 74%, var(--surface-container-high)); }
.activity-cell[data-level="4"], .profile-activity-legend i[data-level="4"] { background: var(--primary); }
.activity-cell.is-future { opacity: .18; }

.profile-activity-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 12px;
  color: var(--on-surface-variant);
  font-size: 10px;
}

.profile-activity-legend i { width: 8px; height: 8px; }

@media (max-width: 719px) {
  :root {
    --mobile-content-cut: 62px;
    --mobile-title-gutter: 12px;
  }

  /* The wallpaper never follows Android's transient visual-viewport pan. */
  html[data-background="prism-mono"] body > .theme-backdrop,
  html[data-background="prism-violet"] body > .theme-backdrop {
    top: 0 !important;
    transform: none !important;
  }

  /* Home, database and profile use the same two-row masthead typography. */
  body:not(.mobile-database-tab):not(.mobile-profile-tab) .topbar .brand,
  body.mobile-database-tab .mobile-workspace-heading > p,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head p {
    font-family: var(--font-logo, "Inter", "Noto Sans SC", sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
    color: var(--primary) !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .brand .logo-word,
  body:not(.mobile-database-tab):not(.mobile-profile-tab) .brand .logo-dot {
    color: var(--primary) !important;
  }

  body:not(.mobile-database-tab):not(.mobile-profile-tab) .hero h1,
  body.mobile-database-tab .mobile-workspace-heading h2,
  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head h2 {
    font-family: var(--font-editorial, "Noto Serif SC", "Songti SC", serif) !important;
    font-size: var(--mobile-masthead-title-size) !important;
    font-weight: 500 !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    color: var(--on-surface) !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head {
    position: relative !important;
    height: var(--mobile-content-cut) !important;
    min-height: var(--mobile-content-cut) !important;
    padding: 0 !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head > div {
    position: absolute;
    inset: 0;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head p {
    position: absolute;
    top: 4px;
    left: var(--mobile-title-gutter);
    height: 18px;
    margin: 0 !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head h2 {
    position: absolute;
    top: 24px;
    left: var(--mobile-title-gutter);
    height: 34px;
    margin: 0 !important;
  }

  body.mobile-profile-tab .profile-dialog.mobile-tab-page .insights-head > .icon-button {
    display: none !important;
  }

  body.mobile-database-tab .mobile-workspace-heading > p { top: 4px !important; left: 0 !important; }
  body.mobile-database-tab .mobile-workspace-heading > div { top: 24px !important; right: 0 !important; left: 0 !important; }

  /* Reserve real scroll space so the first database card clears the title. */
  html body.mobile-database-tab:not(.mobile-profile-tab) #showGrid {
    padding-top: calc(var(--mobile-content-cut) + 8px) !important;
    scroll-padding-top: calc(var(--mobile-content-cut) + 8px);
  }

  /* Do not let a closing add page restore focus or briefly repaint its form. */
  html body #searchDialog.search-dialog.keyboard-closing .remote-search {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  /* Lighter Material glyphs and more balanced icon baselines. */
  :is(.mobile-bottom-nav, .mobile-filter-row, .mobile-profile-hub) .material-symbols-rounded {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  }

  .mobile-filter-row > button .material-symbols-rounded {
    font-size: 16px !important;
    transform: none !important;
  }

  .mobile-tab-indicator .material-symbols-rounded {
    font-size: 19px !important;
    transform: none !important;
  }

  /* Profile actions read like a native settings list, without icon tiles. */
  .mobile-profile-account {
    grid-template-columns: 28px minmax(0, 1fr) 20px !important;
    min-height: 62px !important;
    padding: 9px 0 !important;
    gap: 12px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--outline-variant) !important;
    background: transparent !important;
    color: var(--on-surface) !important;
  }

  .mobile-profile-account > .material-symbols-rounded:first-child,
  .mobile-profile-actions button > .material-symbols-rounded:first-child {
    display: grid !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 0 !important;
    place-items: center !important;
    background: transparent !important;
    color: var(--primary) !important;
    font-size: 21px !important;
  }

  .mobile-profile-account small { color: var(--on-surface-variant) !important; }

  .mobile-profile-actions {
    margin-top: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .mobile-profile-actions button {
    grid-template-columns: 28px minmax(0, 1fr) 20px !important;
    min-height: 60px !important;
    padding: 9px 0 !important;
    gap: 12px !important;
    background: transparent !important;
  }

  .mobile-profile-actions button > .material-symbols-rounded:last-child,
  .mobile-profile-account > .material-symbols-rounded:last-child {
    font-size: 18px !important;
    color: var(--on-surface-variant) !important;
  }

  /* One visual line for avatar, name and edit affordance. */
  .profile-summary {
    grid-template-columns: 72px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .profile-summary > div {
    display: flex !important;
    align-items: center !important;
    min-height: 44px;
  }

  .profile-summary strong {
    font-family: var(--font-ui) !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .profile-summary > button {
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--primary) !important;
  }

  .profile-summary > button .material-symbols-rounded { font-size: 21px !important; }

  .profile-activity-frame {
    padding: 14px 12px;
    overflow: hidden;
  }

  .profile-activity-grid {
    grid-template-rows: repeat(7, 4px);
    grid-auto-columns: 4px;
    gap: 2px;
  }

  .profile-activity-legend i { width: 7px; height: 7px; }

  .profile-tooltip {
    z-index: 1500 !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  .profile-info-tip:focus .profile-tooltip,
  .profile-info-tip:focus-within .profile-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}