/* /activity: (misc)/activity/client.tsx + components/contribution-graph.tsx */
.act {
  width: min(100%, var(--shell-measure));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  padding-block-start: var(--site-block-start);
  padding-block-end: var(--site-block-end);
  --shell-measure: var(--wide-measure);
  /* pb-16 in the original loses to .wide-shell padding-block-end (globals.css is unlayered) */
  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.act-kicker { font-size: .875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.act-title { margin-top: .5rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -.025em; }
.act-lede { margin-top: .75rem; max-width: 42rem; font-size: .875rem; line-height: 1.5rem; color: hsl(var(--muted-foreground)); }

.act-metrics {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: .75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--border));
}
.act-metric { background-color: hsl(var(--background)); padding: 1.25rem; }
.act-metric-v { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.act-metric-l { margin-top: .5rem; font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }

.act-nav { margin-top: 3rem; display: flex; flex-wrap: wrap; border-bottom: 1px solid hsl(var(--border)); }
.act-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.act-tab:hover, .act-tab[aria-current="true"] { color: hsl(var(--foreground)); }
.act-tab[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: hsl(var(--foreground));
}
.act-tab-img { width: 1rem; height: 1rem; object-fit: contain; }

.act-sec {
  scroll-margin-top: 2rem;
  border-bottom: 1px solid hsl(var(--border));
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.act-sec:last-child { border-bottom-width: 0; }
.act-sec.act-sec-hl { background-color: hsl(var(--muted) / .12); }
.act-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.act-id { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.act-idtext { min-width: 0; }
.act-logo {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}
.act-logo-img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.act-name-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; row-gap: .25rem; }
.act-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; letter-spacing: -.025em; }
.act-user { font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.act-rank { margin-top: .25rem; font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.act-cap { text-transform: capitalize; }
.act-right { display: flex; align-items: center; gap: 1.25rem; }
.act-stats { display: none; align-items: center; gap: 1.25rem; }
.act-stat { min-width: 4rem; text-align: right; }
.act-stat-v { font-size: .875rem; line-height: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }
.act-stat-l { margin-top: .25rem; font-size: 11px; color: hsl(var(--muted-foreground)); }
.act-links { display: flex; align-items: center; gap: .25rem; color: hsl(var(--muted-foreground)); }
.act-link { padding: .5rem; transition: color .15s cubic-bezier(.4, 0, .2, 1); }
.act-link:hover { color: hsl(var(--foreground)); }
.act-link-svg { width: 1rem; height: 1rem; }

/* contribution graph */
.act-graph-wrap { position: relative; margin-top: 1.75rem; }
.act-graph { display: flex; width: 100%; max-width: 100%; flex-direction: column; gap: .5rem; margin-inline: auto; font-size: 11px; }
.act-cal { width: 100%; max-width: 100%; }
.act-svg { display: block; height: auto; width: 100%; overflow: visible; }
.act-labels { fill: hsl(var(--muted-foreground)); -webkit-user-select: none; user-select: none; }
.act-block {
  transition-property: filter, opacity;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .1s;
  animation-duration: .1s;
}
.act-block:not(.act-key) { cursor: default; }
.act-block:hover { filter: brightness(1.25); opacity: .95; }
.act-block:focus-visible { outline: 1px solid hsl(var(--foreground) / .4); outline-offset: 1px; }
.act-block[data-level="0"] { fill: hsl(var(--muted-foreground) / .05); }
.act-block[data-level="1"] { fill: hsl(var(--muted-foreground) / .2); }
.act-block[data-level="2"] { fill: hsl(var(--muted-foreground) / .4); }
.act-block[data-level="3"] { fill: hsl(var(--muted-foreground) / .6); }
.act-block[data-level="4"] { fill: hsl(var(--muted-foreground) / .8); }
.act-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  white-space: nowrap;
  margin-top: .5rem;
  align-items: center;
  padding-inline: .125rem;
}
.act-total { font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.act-total-n { font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }
.act-legend { margin-left: auto; display: flex; align-items: center; font-size: .75rem; line-height: 1rem; }
.act-less { margin-right: .25rem; color: hsl(var(--muted-foreground)); }
.act-more { margin-left: .25rem; color: hsl(var(--muted-foreground)); }

.act-tip {
  pointer-events: none;
  position: fixed;
  z-index: 50;
  transform: translate(-50%, -100%);
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--popover));
  padding: .375rem .625rem;
  font-size: .75rem;
  line-height: 1rem;
  color: hsl(var(--popover-foreground));
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
}
.act-tip.below { transform: translate(-50%, 0); }
.act-tip-l { font-weight: 500; font-variant-numeric: tabular-nums; }
.act-tip-d { color: hsl(var(--muted-foreground)); }

.act-note { margin-top: 2rem; font-size: .75rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.act-note-a { text-decoration-line: underline; text-underline-offset: 2px; }
.act-note-a:hover { color: hsl(var(--foreground)); }

@media (min-width: 640px) {
  .act-title { font-size: 2.25rem; line-height: 2.5rem; }
  .act-metric-v { font-size: 1.5rem; line-height: 2rem; }
  .act-stats { display: flex; }
  .act-foot { column-gap: 1rem; }
  .act-sm { display: none; }
}
@media (min-width: 1024px) {
  .act-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}