#links {
  display: grid;
  grid-template-columns: 1;
  gap: 1em;
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

#links > li {
  /* visit-tracker's removeRow waits for this transition's transitionend
     before removing the row — keep them in sync. */
  transition: opacity 0.3s ease;

  /* Applied when a link is opened while the "new links" filter is active,
     just before the row is removed from the list. */
  &.removing {
    opacity: 0;
  }

  /* Keyboard-navigation selection: an outline.
     Negative margins offset the padding so neighbouring rows don't shift. */
  &.selected {
    outline: 0.1875rem solid var(--link-color);
    border-radius: 0.5rem;
    padding: 0.5em 0.75em;
    margin: -0.5em -0.75em;
    transition: outline-width 0.2s linear;

    /* Brief confirmation that "y" copied the URL. */
    &.copied {
      outline-width: 0.5em;
    }
  }

  h2 {
    font-size: 1em;
    margin: 0;

    a {
      color: var(--fg-color);
      font-weight: bold;
      text-decoration: underline;
      text-decoration-thickness: 0.125rem;
      text-decoration-color: var(--highlight-color);
      transition: none;
      overflow-wrap: break-word;

      display: block;

      &:hover {
        color: var(--link-color);
      }
    }
  }

  &[data-visited] h2 a {
    text-decoration-color: var(--border-color);
    &:hover {
      text-decoration-color: var(--highlight-color);
    }
  }

  .link-description,
  .link-tags {
    font-size: 0.75em;
    color: var(--mid-color);
    overflow-wrap: break-word;
    margin: 0;
  }

  /* The row's two dense link strips. Both keep the painted size they had —
     0.75em text — and grow the hit box to 24px with padding a negative margin
     hands straight back, so each strip stays the 18px line it always was. The
     boxes then overflow that line by 3px, and the margins below are the
     overflow plus half a pixel: the least that keeps neighbours apart. */
  .link-tags {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 0.5em;
    margin-top: 0.3em;

    /* inline-block so min-width reaches the two-letter tags. */
    a {
      display: inline-block;
      min-width: 1.5rem;
      text-align: center;
      padding: 0.25em 0.2em;
      margin: -0.25em -0.2em;
    }
  }

  footer {
    font-size: 0.75em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.55em;

    a {
      padding: 0.25em 0.5em;
      margin: -0.25em -0.5em;
    }
  }
}