/* The version beside the wordmark, and the changelog under it.
   Handoff VERSION-CHANGELOG §3-§4, §7, boards 174-178, 183. */

/* Logo, "meet" and the version: three members of one group, one gap apart. */
.brand {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.version-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

/* Bare text: no pill, no border, no ground (D84). The only mono in the bar,
   because it is an identifier, not a label. */
.version-chip {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: var(--t-code-300);
  color: var(--c-neutral-9);
  cursor: pointer;
  user-select: none;
  transition: color 200ms ease-in-out;
}
.version-chip:hover {
  color: var(--c-neutral-12);
}
/* A newer release lifts the number a step (board 177). */
.version-chip-newer {
  color: var(--c-neutral-12);
}
.version-chip[aria-expanded="true"],
.version-chip-here {
  color: var(--c-blue-lighter);
}
.version-chip:focus-visible {
  outline: 1px solid var(--c-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.version-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--c-blue);
}

/* The popover: under the chip, left edges flush, 460px, no shadow - this
   system has none. Not a modal: nothing behind it dims (D85). */
.changelog {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 60;
  width: 460px;
  max-height: min(640px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
  background: var(--c-bg-black);
  text-align: left;
}
.changelog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--c-neutral-2);
}
.changelog-head > div {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.changelog-title {
  font: var(--t-h8-500);
  letter-spacing: var(--ls-h8);
  color: var(--c-white);
}
.changelog-state {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}
.changelog-close {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font: var(--t-body-primary-300);
  color: var(--c-neutral-9);
  cursor: pointer;
}
.changelog-close:hover {
  color: var(--c-neutral-12);
}

/* Administrators only, and only while checking is on (D86). */
.changelog-newer {
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
  padding: 12px 18px;
  background: rgba(73, 118, 255, 0.08);
  border-bottom: 1px solid var(--c-neutral-2);
}
.changelog-newer-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  margin-top: 7px;
  border-radius: 100px;
  background: var(--c-blue);
}
.changelog-newer strong {
  display: block;
  font: var(--t-body-small-500);
  color: var(--c-white);
}
.changelog-newer p {
  margin: 3px 0 0;
  font: var(--t-body-small-300);
  color: var(--c-neutral-11);
  text-wrap: pretty;
}

/* The list scrolls; the head and the foot stay where they are (§4). */
.changelog-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  padding: 16px 18px;
}
.changelog-release {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.changelog-release + .changelog-release {
  padding-top: 16px;
  border-top: 1px solid var(--c-neutral-2);
}
.changelog-release-head {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.changelog-version {
  font: var(--t-code-400);
  color: var(--c-neutral-13);
}
.changelog-version-running {
  color: var(--c-white);
}
.changelog-date {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}
.changelog-entries {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
}
.changelog-text {
  font: var(--t-body-small-300);
  color: var(--c-neutral-12);
  text-wrap: pretty;
}
.changelog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--c-neutral-2);
}
.changelog-foot a {
  font: var(--t-body-small-400);
  color: var(--c-blue-lighter);
  text-decoration: none;
}
.changelog-count {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
}

/* The kinds of change, shared by the popover and the Releases screen. */
.kind {
  font: var(--t-code-300);
}
.kind-added {
  color: var(--c-green);
}
.kind-changed {
  color: var(--c-blue-lighter);
}
.kind-fixed {
  color: var(--c-neutral-10);
}
.kind-security {
  color: var(--c-orange);
}

/* Badges: Running green, Available blue, Security orange, breaking red - and
   red nowhere else (§4a). */
.release-badge {
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font: var(--t-body-small-500);
}
.release-badge-running {
  color: var(--c-green);
}
.release-badge-available {
  color: var(--c-blue-lighter);
}
.release-badge-security {
  color: var(--c-orange);
}
.release-badge-breaking {
  color: var(--c-red);
}

/* The version row of the account sheet exists only on a phone (§7). */
.account-version {
  display: none;
}

/* A phone: no room for the chip in the 56px bar without squeezing the avatar,
   so the version moves to the account sheet and the changelog becomes a sheet
   from 72px to the bottom (§7, board 183). */
@media (max-width: 767px) {
  .version-chip {
    display: none;
  }
  .changelog {
    position: fixed;
    top: 72px;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: none;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }
  /* 460px of grid does not fit a phone: the kind sits above its sentence
     (board 183). */
  .changelog-entries {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
  .changelog-entries > .kind:not(:first-child) {
    margin-top: 10px;
  }
  /* The glyph is small; the target is not. */
  .changelog-close {
    width: 44px;
    height: 44px;
    margin: -10px -12px 0 0;
  }
  .account-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-top: 1px solid var(--c-neutral-2);
    background: none;
    cursor: pointer;
    text-align: left;
  }
  .account-version-number {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font: var(--t-code-300);
    color: var(--c-neutral-9);
  }
  .account-version-newer {
    font: var(--t-body-small-300);
    color: var(--c-blue-lighter);
  }
  .account-version-open {
    white-space: nowrap;
    font: var(--t-body-small-400);
    color: var(--c-blue-lighter);
  }
}