@layer lotek {
  .lt-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-2);
    padding: var(--lt-card-padding, var(--lt-spacing-4));
    /* The whole `font`, not just the family: a card that is a <button>
       otherwise inherited the browser's button font, 13 pixels. */
    font: inherit;
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-canvas);
    border: 1px solid var(--lt-color-neutral-border-subtle);
    border-radius: var(--lt-card-radius, var(--lt-spacing-2));
  }

  /*
   * The card is a flex column, and a child is then stretched to the full
   * width. A badge, a label, a button or a link should keep its natural
   * width, or "Approved" became a band across the card. The rule asks for
   * the element type and not the class: if other components' classes were
   * here, the vocabulary would count them as the card's. Paragraphs, lists
   * and images stretch as before.
   */
  .lt-card > :where(span, a, button) {
    align-self: flex-start;
  }

  .lt-card__title {
    margin: 0;
    font-size: var(--lt-font-size-l);
    font-weight: var(--lt-font-weight-semibold);
    line-height: var(--lt-line-height-compact);
  }

  /* Only the element counts, so a class on the paragraph wins: `lt-paragraph`
     with its line height, `lt-help-text`, `lt-error-text` and an
     `lt-card__title` that is a <p>. With `.lt-card p` the card beat them. */
  :where(.lt-card) p {
    margin: 0;
    line-height: var(--lt-line-height-article);
  }

  .lt-card[data-variant="filled"] {
    background: var(--lt-color-neutral-surface);
    border-color: transparent;
  }

  /* The whole card is clickable. The element is then an <a> or a <button>,
     and the focus ring comes from there, not from here. */
  .lt-card[data-interactive] {
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .lt-card[data-interactive]:hover {
    border-color: var(--lt-color-accent-border);
  }

  .lt-card[data-interactive]:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }
}