/* GitHub stats lookup page (/github, /github/<username>).
   .home-stats-panel / .home-stat (defined in index.css) are shared with
   the home page's own GitHub widget; everything below is specific to
   this page: the lookup form, the profile header, and the heatmap. */

/* This page already sits inside one .site-section-card; nesting the shared
   .home-stats-panel's own card chrome (border, blurred glass background,
   shadow, blob) inside that would read as a container-in-a-container. Strip
   it back down to plain content so identity, stats and heatmap share the
   one outer card. */
/* !important: index.css re-declares .home-stats-panel's background/border
   for dark mode, coarse-pointer and hover states via selectors like
   "body .home-stats-panel", which outrank a single class here. This modifier
   needs to win in all of those states, so there's no lower-specificity way
   to do it short of editing every one of those rules. */
.home-stats-panel--flat {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-stats-panel--flat::after {
  content: none !important;
}

/* This page's title is a full sentence rather than a single word, so it needs
   room for descenders: the shared .home-title clips them at line-height 1.05
   because the gradient is painted through background-clip: text. */

.github-lookup__form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.github-lookup__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
}

.github-lookup__field i {
  position: absolute;
  left: 0.9rem;
  opacity: 0.55;
  pointer-events: none;
}

.github-lookup__field input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
  background: color-mix(in srgb, var(--background-color) 70%, transparent);
  color: inherit;
  font: inherit;
}

.github-lookup__field input:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 1px;
}

.github-lookup__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--accent-color);
  color: var(--background-color);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-duration) var(--transition-easing);
}

html:not([data-hover-effects="off"]) .github-lookup__submit:hover {
  filter: brightness(1.08);
}

.github-lookup__error {
  margin: 0 0 var(--space-4);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md, 0.5rem);
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 34%, transparent);
  color: color-mix(in srgb, #ef4444 78%, var(--text-color));
  font-size: 0.9rem;
  font-weight: 600;
}

.github-lookup__error[hidden] {
  display: none;
}

.github-profile__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.github-profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex: none;
  border: 2px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.github-profile__names {
  min-width: 0;
}

.github-profile__name {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.2;
}

.github-profile__login {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: color-mix(in srgb, var(--accent-color) 82%, var(--text-color));
}

.github-profile__login i {
  font-size: 0.75em;
}

.github-profile__bio {
  margin: var(--space-2) auto 0;
  font-size: 0.9rem;
  opacity: 0.8;
  max-width: 46ch;
}

/* Followers/following/repositories called out as plain text next to the
   identity, GitHub's own profile-header treatment, rather than burning three
   more card slots on numbers a visitor reads before anything else. */
.github-profile__inline-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}

.github-profile__inline-stats a {
  color: color-mix(in srgb, var(--text-color) 68%, transparent);
  font-size: 0.88rem;
  text-decoration: none;
}

.github-profile__inline-stats strong {
  color: var(--text-color);
  font-weight: 800;
}

html:not([data-hover-effects="off"]) .github-profile__inline-stats a:hover strong {
  color: var(--accent-color);
}

/* Discord-linked GitHub account hint on the lookup page. */
.github-lookup__linked {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, #5865f2 32%, transparent);
  background: color-mix(in srgb, #5865f2 10%, transparent);
  font-size: 0.88rem;
}

.github-lookup__linked[hidden] {
  display: none;
}

.github-lookup__linked > i {
  color: #5865f2;
}

.github-lookup__linked-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: #5865f2;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

/* `display: inline-flex` above outranks the hidden attribute's UA `display:
   none`, so without this the button still renders as an empty pill. */
.github-lookup__linked-action[hidden] {
  display: none;
}

html:not([data-hover-effects="off"]) .github-lookup__linked-action:hover {
  filter: brightness(1.08);
}

/* Mini contribution heatmap. Columns are weeks, rows are weekdays, filled
   top-to-bottom then left-to-right - the same orientation GitHub uses. */
.github-heatmap {
  position: relative;
  /* Grid/flex items default to a content-based min-width, which fights the
     scroller below and pushes the whole page wider on narrow viewports. */
  min-width: 0;
}

.github-heatmap[hidden] {
  display: none;
}

.github-heatmap__tooltip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md, 0.5rem);
  background: color-mix(in srgb, var(--text-color) 88%, transparent);
  color: var(--background-color);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.github-heatmap__tooltip[hidden] {
  display: none;
}

.github-heatmap__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
  font-size: 0.72rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-color) 58%, transparent);
}

.github-heatmap__caption > span:first-child {
  color: color-mix(in srgb, var(--text-color) 82%, transparent);
  font-weight: 700;
}

/* Horizontal scroller so a full year of weeks stays legible on narrow
   viewports instead of squashing into illegible slivers. */
.github-heatmap__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  padding-bottom: 2px;
  /* Fixed cell size (set on __grid/__months below) means content can be
     wider than the panel - scroll it instead of shrinking cells to nothing. */
  scrollbar-width: thin;
}

.github-heatmap__months {
  display: flex;
  gap: clamp(3px, 0.4vw, 4px);
  margin: 0 0 var(--space-2) calc(30px + clamp(3px, 0.4vw, 4px));
  width: max-content;
}

.github-heatmap__months span {
  flex: none;
  width: clamp(13px, 1.6vw, 15px);
  font-size: 0.68rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-color) 52%, transparent);
}

.github-heatmap__body {
  display: flex;
  gap: clamp(3px, 0.4vw, 4px);
  width: max-content;
}

.github-heatmap__weekdays {
  display: grid;
  grid-template-rows: repeat(7, clamp(13px, 1.6vw, 15px));
  gap: clamp(3px, 0.4vw, 4px);
  flex: none;
  width: 30px;
}

.github-heatmap__weekdays span {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: clamp(13px, 1.6vw, 15px);
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
}

/* A year of week columns. Unlike a flexed-to-fit grid, cells stay a fixed
   readable size and the row scrolls horizontally instead of shrinking away. */
.github-heatmap__grid {
  display: flex;
  gap: clamp(3px, 0.4vw, 4px);
}

.github-heatmap__week {
  display: grid;
  grid-template-rows: repeat(7, clamp(13px, 1.6vw, 15px));
  gap: clamp(3px, 0.4vw, 4px);
}

.github-heatmap__cell {
  width: clamp(13px, 1.6vw, 15px);
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent-color) calc(var(--heatmap-strength) * 1%), transparent);
  /* An inset ring instead of a border: a 1px border on a ~8px cell eats most
     of the swatch and washes the colour out. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 7%, transparent);
}

.github-heatmap__cell--blank {
  visibility: hidden;
}

.github-heatmap__cell:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 1px;
  border-radius: 1px;
}

.github-heatmap__cell[data-level="0"] { --heatmap-strength: 7; }
.github-heatmap__cell[data-level="1"] { --heatmap-strength: 26; }
.github-heatmap__cell[data-level="2"] { --heatmap-strength: 46; }
.github-heatmap__cell[data-level="3"] { --heatmap-strength: 68; }
.github-heatmap__cell[data-level="4"] { --heatmap-strength: 92; }

.github-heatmap__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(2px, 0.3vw, 4px);
  margin-top: var(--space-3);
  font-size: 0.68rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-color) 52%, transparent);
}

.github-heatmap__legend .github-heatmap__cell {
  width: 10px;
  height: 10px;
}

/* The lookup form sits in its own centered row under the page header. */
.github-lookup {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 44rem);
}

.github-lookup .github-lookup__form,
.github-lookup .github-lookup__linked {
  margin-bottom: 0;
}

.github-lookup .github-lookup__error {
  margin: 0;
  text-align: center;
}

@media (max-width: 700px) {
  /* Under the centered header, a full-width button reads better than one
     left behind when the field wraps above it. */
  .github-lookup .github-lookup__submit {
    flex: 1 1 100%;
    justify-content: center;
  }
}