/* Feed/Index.cshtml. The scrubber is a real form; the cards are server HTML. */

@layer components {

  .lf-scrubber {
    display: grid;
    gap: var(--sp-3);
    margin-block: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
  }

  .lf-scrubber__set {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
  }

  .lf-scrubber__hint {
    margin: 0 0 var(--sp-2);
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .lf-scrubber__opt {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-body-s);
  }

  .lf-cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-5);
  }

  .lf-card {
    display: grid;
    gap: var(--sp-3);
  }

  .lf-card__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }

  .lf-card__handle {
    color: inherit;
    font-weight: 650;
    text-decoration: none;
  }

  .lf-card__body {
    margin: 0;
    font-size: var(--fs-body);
  }

  .lf-card__photo {
    margin: 0;
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: var(--bh-surface-3);
    border-radius: var(--r-md);
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
  }

  .lf-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .lf-more {
    margin-block-start: var(--sp-6);
  }

  .lf-empty {
    color: var(--bh-titanium);
  }
}