/* Compose/Index.cshtml */

@layer components {

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

  .lf-path {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
  }

  .lf-path__name {
    margin: 0;
    font-size: var(--fs-h3);
  }

  .lf-path__ceil,
  .lf-path__why,
  .lf-path__limit {
    margin: 0;
    font-size: var(--fs-body-s);
  }

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

  .lf-form {
    display: grid;
    gap: var(--sp-3);
    max-inline-size: 40rem;
    margin-block-start: var(--sp-4);
  }

  .lf-form__label {
    font-size: var(--fs-body-s);
  }

  .lf-form__input,
  .lf-form__area,
  .lf-form__select {
    padding: var(--sp-3);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
    background: var(--bh-surface-1);
    color: inherit;
  }
}