/* The resources: a search, tags to filter by, cards with an optional
   preview image, and a resource's page (notes, files, copy of the page). */

@layer components {
  .resources-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: flex-end;
    margin-block: var(--space-4);
  }

  .resources-search__field {
    flex: 1 1 16rem;
  }

  .tag-filter__heading {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .tag-filter__list,
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tag-chip {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    text-decoration: none;

    /* Selected: filled, and bold so it shows without colours too. */
    &[aria-current="true"] {
      font-weight: 700;
      color: var(--color-on-accent);
      background: var(--color-accent);
      border-color: var(--color-accent);

      @media (forced-colors: active) {
        color: HighlightText;
        background: Highlight;
        border-color: Highlight;
      }
    }
  }

  .tag-chip__count {
    font-size: var(--font-size-sm);
    opacity: 0.75;
  }

  /* The form's tag picker: ticked tags are outlined, and bold so it shows
     without colours too. */

  /* `.field` sets `display`, which would show the search without
     JavaScript. */
  .tag-picker [hidden] {
    display: none;
  }

  .tag-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tag-option {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;

    &:has(:checked) {
      font-weight: 700;
      border-color: var(--color-accent);
      box-shadow: inset 0 0 0 1px var(--color-accent);

      @media (forced-colors: active) {
        border-color: Highlight;
        box-shadow: none;
      }
    }

    /* The whole pill shows the focus of its box. */
    &:has(:focus-visible) {
      outline: 3px solid var(--color-focus);
      outline-offset: 2px;
    }
  }

  .tag-picker__new {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;

    > .tag-picker__input {
      flex: 1 1 14rem;
      inline-size: auto;
    }
  }

  .resource-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .resource-card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
  }

  .resource-card__image {
    flex: 0 0 auto;
    inline-size: min(10rem, 100%);
    block-size: auto;
    border-radius: var(--radius-control);
  }

  .resource-card__body {
    display: grid;
    flex: 1 1 18rem;
    gap: var(--space-2);
    min-inline-size: 0;

    > * {
      margin: 0;
    }
  }

  .resource-card__title {
    font-size: var(--font-size-lg);
    overflow-wrap: anywhere;
  }

  .resource-card__site {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .resource-link__url {
    display: block;
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  .resource-report {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
    margin-block-start: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .resource-image {
    inline-size: min(24rem, 100%);
    block-size: auto;
    border-radius: var(--radius-control);
  }

  /* Markdown: notes and the copy of a page. */
  .prose {
    overflow-wrap: anywhere;

    pre {
      padding: var(--space-3);
      white-space: pre-wrap;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-control);
    }

    img {
      max-inline-size: 100%;
      block-size: auto;
    }
  }

  .resource-copy {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
  }

  .resource-copy__summary {
    cursor: pointer;
    font-weight: 700;
  }

  .resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-6);
  }
}