/* Releases, tags and the release form. Kept as a page stylesheet, outside the size-limited theme files. */

/* The releases and tags pages sit in the shared sidebar layout (components/common/sidebar): the heading row, with the
   search and the page's actions on the right, then the list. */
.github-release-heading {
  margin-bottom: 16px;
}
.github-release-heading > .theme-list-title {
  min-width: 0;
}
.github-release-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.github-release-search {
  flex: 0 1 248px;
  min-width: 0;
}
/* A single release: "Releases / <title>" in place of the heading. */
.github-release-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 20px;
  line-height: 28px;
}
.github-release-breadcrumb > a {
  flex-shrink: 0;
  color: var(--github-fgColor-accent);
}
.github-release-breadcrumb-separator {
  color: var(--color-text-light-1);
}
.github-release-breadcrumb > h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Each release is a box: the title with its label and actions, who released it and from which tag and commit, the
   notes, then the assets. */
.github-release-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.github-release {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--color-light-border);
  border-radius: var(--border-radius);
  background: var(--color-box-body);
  scroll-margin-top: 16px;
}
.github-release-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.github-release-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.github-release-title > a:first-child {
  color: var(--color-text);
}
.github-release-title > a:first-child:hover {
  color: var(--github-fgColor-accent);
  text-decoration: underline;
}
.github-release-title > .ui.label,
.github-release-latest {
  flex-shrink: 0;
}
.github-release-latest {
  display: inline-flex;
}
.github-release-latest[hidden] {
  display: none;
}
.github-release-title > .github-release-draft {
  border: 0;
  background: var(--github-bgColor-neutral-emphasis);
  color: var(--github-fgColor-onEmphasis);
}
.github-release-controls {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
.github-release-controls > .theme-icon-button {
  width: 28px;
  height: 28px;
}
/* GitHub's small Compare button. The shared native-button size rule weighs as much as its most specific selector, and
   Forgejo's Tailwind padding is !important. */
.github-release-controls .js-branch-tag-selector .ui.ui.ui.ui.button.branch-dropdown-button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  line-height: 20px !important;
}
/* The card's controls end at the right edge of the column, so the Compare menu opens towards the left. */
.github-release-controls .js-branch-tag-selector .menu {
  right: 0;
  left: auto;
}
.github-release-controls > .github-release-delete:hover {
  color: var(--github-control-danger-fgColor-hover);
}

.github-release-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  color: var(--color-text-light-1);
  font-size: 14px;
  line-height: 20px;
}
/* The meta lines close with a divider; the notes or assets start 16px below it. */
.github-release-meta:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-light-border);
}
.github-release-meta > p {
  margin: 0;
}
.github-release-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.github-release-byline > .author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.github-release-byline > .author a {
  color: var(--color-text);
}
.github-release-byline > .author img {
  border-radius: 50%;
}
.github-release-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.github-release-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--color-text-light-1);
  overflow-wrap: anywhere;
}
.github-release-ref:hover {
  color: var(--github-fgColor-accent);
}
.github-release-ref > svg,
.github-release-status svg {
  flex-shrink: 0;
}
.github-release-status svg {
  width: 16px;
  height: 16px;
}
/* "± N commits" in the refs row, as GitHub's commits item; "to main since this release" is its tooltip. */
.github-release-ahead strong {
  font-weight: inherit;
}
.github-release-meta > .signature-row {
  margin: 0 !important;
}

.github-release-notes {
  margin-top: 16px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}
.github-release-notes > :first-child {
  margin-top: 0 !important;
}
.github-release-notes > :last-child {
  margin-bottom: 0 !important;
}
.github-release-notes :is(h1, h2) {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-light-border);
  font-weight: 600;
  line-height: 1.25;
}
.github-release-notes h2 {
  font-size: 24px;
}
.github-release-notes h3 {
  font-size: 20px;
}
/* The notes sit inside a list item, so the browser would give their bullets the nested style. */
.github-release-notes ul {
  list-style-type: disc;
}
.github-release-notes ul ul {
  list-style-type: circle;
}
.github-release-notes ul ul ul {
  list-style-type: square;
}

/* "Assets N": a disclosure over a table of files, each with its icon and name, then its downloads, size and
   date; the source code archives have no size, so their date keeps the same right edge. */
.github-release-assets {
  margin: 16px -16px -16px;
  padding: 16px;
  border-top: 1px solid var(--color-light-border);
}
/* Straight after the meta lines, their divider already separates the assets. */
.github-release-meta + .github-release-assets {
  margin-top: 0;
  border-top: 0;
}
.github-release-assets > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  list-style: none;
  cursor: pointer;
}
.github-release-assets > summary::-webkit-details-marker {
  display: none;
}
.github-release-assets-marker {
  color: var(--color-text-light-1);
  transition: transform 0.12s ease;
}
.github-release-assets[open] .github-release-assets-marker {
  transform: rotate(90deg);
}
.github-release-asset-count {
  font-size: 12px;
}
.github-release-asset-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-light-border);
  border-radius: var(--border-radius);
}
.github-release-asset {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 45px;
  padding: 8px 16px;
  color: var(--color-text-light-1);
  font-size: 14px;
  line-height: 20px;
}
.github-release-asset + .github-release-asset {
  border-top: 1px solid var(--color-light-border);
}
.github-release-asset-name {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.github-release-asset-name:hover {
  color: var(--github-fgColor-accent);
  text-decoration: underline;
}
.github-release-asset-name > svg {
  flex-shrink: 0;
  color: var(--color-text-light-1);
}
.github-release-asset-downloads {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.github-release-asset-size,
.github-release-asset-date {
  text-align: right;
  white-space: nowrap;
}
.github-release-asset-size {
  flex: 0 0 72px;
}
.github-release-asset-date {
  flex: 0 0 112px;
}
.github-release-asset:not(:has(.github-release-asset-size)) .github-release-asset-date {
  flex-basis: calc(72px + 16px + 112px);
}

.github-release-empty {
  padding: 64px 24px;
}

@media (max-width: 767.98px) {
  .github-release-actions {
    flex: 1 1 100%;
  }
  .github-release-search {
    flex: 1 1 auto;
  }
  .github-release-header {
    flex-direction: column;
    gap: 12px;
  }
  .github-release-title {
    font-size: 24px;
  }
  .github-release-controls {
    flex-wrap: wrap;
  }
  /* Stacked under the title, the controls start at the left edge, and so does the menu. */
  .github-release-controls .js-branch-tag-selector .menu {
    right: auto;
    left: 0;
  }
  .github-release-asset {
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  .github-release-asset-name {
    flex-basis: 100%;
  }
  .github-release-asset-size,
  .github-release-asset:not(:has(.github-release-asset-size)) .github-release-asset-date,
  .github-release-asset-date {
    flex: none;
  }
}
/* New and edit release (templates/repo/release/new.tmpl): GitHub's New release page. One column under the title: the
   tag menu and the target as buttons over Forgejo's helper text, the title as a large field, the editor, the assets
   and the drop area for binaries, the options as GitHub's checkboxes with their notes, then the actions with the
   primary one first and Delete apart on the right. */
.page-content.repository.new.release {
  > .ui.container {
    box-sizing: border-box;
    width: calc(100% - 32px) !important;
    max-width: 1216px !important;
    margin: 24px auto !important;
    padding: 0;
  }
  .ui.dividing.header {
    margin: 0 0 24px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-light-border);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    .sub.header {
      margin: 4px 0 0;
      color: var(--color-text-light-1);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    }
  }
  .ui.form {
    max-width: 896px;
  }
  .ui.form .field {
    margin-bottom: 16px;
  }

  /* The tag and the target: two 32px buttons in a row, the helper text under them. */
  .theme-release-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  #tag-helper {
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    color: var(--color-text-light-1);
    font-size: 12px;
    line-height: 18px;
  }
  .theme-release-tag-picker,
  #tag-target-selector {
    min-width: 0;
    max-width: 100%;
  }
  .theme-release-tag-picker > .theme-dropdown > summary,
  .theme-release-ref {
    max-width: 100%;
    gap: 4px;
    & > svg:first-child {
      flex: none;
      margin-right: 4px;
    }
    & > :is(span, strong) {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .theme-release-tag-picker > .theme-dropdown > summary > svg:last-child {
    flex: none;
    margin-left: 4px;
  }
  /* An edit keeps its tag and target; they show as GitHub's disabled buttons. */
  .theme-release-ref,
  .theme-release-ref:hover {
    background: var(--color-box-header);
    color: var(--color-text);
    cursor: default;
  }
  .theme-release-ref-label {
    color: var(--color-text-light-1);
    font-weight: 400;
  }
  .theme-release-ref > strong {
    font-weight: 600;
  }
  .field.error .theme-release-tag-picker > .theme-dropdown > summary {
    border-color: var(--color-error-border);
  }

  /* The tag menu opens under its button, Forgejo's tag name field on top as the filter. */
  .theme-release-tag-picker .theme-dropdown-panel {
    inset: calc(100% + 4px) auto auto 0;
    width: 320px;
    & > .theme-dropdown-header {
      position: sticky;
      z-index: 1;
      top: 0;
      background: var(--color-menu);
    }
    & > .theme-dropdown-action[hidden] {
      display: none;
    }
    & > .theme-dropdown-action > svg {
      flex: none;
      color: var(--color-text-light-1);
    }
    & > .theme-dropdown-action > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & > .theme-dropdown-action[aria-current] {
      font-weight: 600;
    }
  }
  .theme-release-tag-filter {
    position: sticky;
    z-index: 1;
    top: 33px;
    padding: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-light-border) 70%, transparent);
    background: var(--color-menu);
  }
  .ui.form .theme-release-tag-filter > #tag-name {
    width: 100%;
    height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--color-light-border);
    border-radius: var(--border-radius);
    background: var(--color-input-background);
    color: var(--color-text);
    font-size: 14px;
    line-height: 20px;
    &:focus {
      border-color: var(--github-bgColor-accent-emphasis);
      outline: none;
      box-shadow: inset 0 0 0 1px var(--github-bgColor-accent-emphasis);
    }
  }

  /* Forgejo's target selector as GitHub's "Target" button; its menu opens under it. */
  #tag-target-selector > .ui.selection.dropdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    padding: 5px 12px !important;
    border: 1px solid var(--color-light-border);
    border-radius: var(--border-radius);
    background: var(--color-button);
    box-shadow: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    &:hover {
      background: var(--color-hover);
    }
    & > svg:first-of-type {
      flex: none;
      margin-right: 4px;
      color: var(--color-text-light-1);
    }
    & > .text {
      min-width: 0;
      overflow: hidden;
      color: var(--color-text);
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & > .dropdown.icon {
      position: static;
      flex: none;
      margin: 0 0 0 4px;
      padding: 0;
      color: var(--color-text-light-1);
      opacity: 1;
      transform: none;
    }
    & > .menu {
      top: calc(100% + 4px);
      left: 0;
      width: max-content;
      min-width: 240px !important;
      max-width: calc(100vw - 32px);
      border: 1px solid var(--color-light-border) !important;
      border-radius: var(--border-radius) !important;
      & > .item {
        padding: 7px 16px !important;
        font-size: 12px;
        line-height: 18px;
      }
    }
  }

  #release-title {
    height: 40px;
    padding: 7px 12px;
    font-size: 16px;
    line-height: 24px;
  }
  .combo-markdown-editor textarea {
    min-height: 200px !important;
  }

  /* Assets: one bordered list of rows, shown once there is a row. */
  .theme-release-assets:has(> .field:not(.tw-hidden)) {
    margin-bottom: 8px;
    border: 1px solid var(--color-light-border);
    border-radius: var(--border-radius);
  }
  .ui.form .theme-release-assets > .field {
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
  }
  .ui.form .theme-release-assets > .field:not(.tw-hidden) ~ .field {
    border-top: 1px solid var(--color-light-border);
  }
  .theme-release-assets > .field > .flex-text-inline {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    & > .flex-text-inline {
      color: var(--color-text-light-1);
    }
  }
  .ui.form .theme-release-assets input.attachment_edit {
    flex: 1 1 160px;
    min-width: 0;
    height: 28px;
    padding: 3px 8px;
    font-size: 14px;
    line-height: 20px;
  }
  .theme-release-asset-meta {
    margin-left: auto;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
  }
  .ui.form .ui.ui.ui.mini.button {
    height: 28px;
    min-height: 28px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
  }
  .ui.form #add-external-link {
    gap: 4px;
    margin: 0 0 16px;
    & > svg {
      color: var(--color-text-light-1);
    }
  }

  /* GitHub's box for binaries: dashed, muted, the message centred. */
  .ui.form .field .dropzone {
    min-height: 0;
    padding: 16px;
    border: 1px dashed var(--color-light-border);
    border-radius: var(--border-radius);
    background: var(--color-box-header);
    & .dz-message {
      margin: 0;
      font-size: 14px;
      line-height: 20px;
    }
  }

  /* The options: GitHub's checkboxes, the box beside a semibold title and the note under it. */
  .theme-release-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
  }
  .theme-settings-checkbox {
    position: relative;
    margin: 0;
    padding-left: 20px;
    /* The browser's own box, as in the settings forms (components/common/form); Forgejo's drawn box is round here. */
    & > input[type="checkbox"] {
      position: absolute;
      top: 4px;
      left: 0;
      width: 13px;
      height: 13px;
      margin: 0;
      border-radius: 3px;
      appearance: auto;
      accent-color: var(--github-bgColor-accent-emphasis);
      &::after {
        display: none;
      }
    }
    & > label {
      display: inline;
      margin: 0;
      color: var(--color-text);
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      cursor: pointer;
    }
  }
  .theme-settings-checkbox-note {
    margin: 0;
    color: var(--color-text-light-1);
    font-size: 12px;
    line-height: 18px;
  }

  /* Actions after a divider: the primary one first (the template keeps Forgejo's order for Enter), Delete apart. */
  .theme-release-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-light-border);
    & > .button-sequence {
      display: flex;
      flex-flow: row-reverse wrap-reverse;
      justify-content: flex-end;
      gap: 8px;
    }
    & .button {
      gap: 4px;
    }
  }
}
.github-tags-box {
  border: 1px solid var(--color-light-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.github-tags-list {
  background: var(--color-box-body);
}
.github-tag-row {
  border-bottom: 1px solid var(--color-light-border);
  min-height: 90px;
  padding: 16px;
}
.github-tag-row:last-child {
  border-bottom: 0;
}
.github-tag-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 28px;
}
.github-tag-heading > a {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}
.github-tag-heading > a:hover {
  color: var(--github-fgColor-accent);
  text-decoration: underline;
}
.github-tag-heading .verification-status {
  margin-left: auto;
}
.github-tag-actions {
  align-items: center;
  color: var(--color-text-light-1);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 16px;
  line-height: 20px;
  margin-top: 8px;
}
.github-tag-actions > span,
.github-tag-actions > a {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  white-space: nowrap;
}
.github-tag-actions a {
  color: var(--color-text-light-1);
  text-decoration: none;
}
.github-tag-actions a:hover {
  color: var(--github-fgColor-accent);
  text-decoration: none;
}
.github-tag-actions svg {
  flex-shrink: 0;
}
.github-tag-actions .github-tag-delete {
  cursor: pointer;
}
.github-tags-empty {
  padding: 48px 16px;
  text-align: center;
}
@media (max-width: 767.98px) {
  .github-tag-actions {
    gap: 8px 16px;
  }
  .github-tag-heading .verification-status {
    margin-left: 8px;
  }
}