/* Rebalance: one collapsible contribution form per target asset class */
@layer components {
  .rebalance__cash {
    margin-block-end: var(--block-space);
  }

  /* The whole group header is the toggle, so it reads as text, not a link */
  .rebalance__toggle {
    color: inherit;
    display: block;
  }

  .rebalance__group {
    display: flex;
    padding-block: var(--block-space);
    padding-inline-start: var(--inline-space-double);
  }

  .rebalance__name {
    font-weight: 700;
  }

  .rebalance__target {
    color: var(--color-ink-medium);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    padding-block: 0.125rem;
  }

  /* Fund picker
  /* ------------------------------------------------------------------------ */

  .fund-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    padding-inline: var(--inline-space-double);
  }

  .fund-tile {
    align-items: center;
    block-size: 4rem;
    border-radius: 0.3em;
    border: var(--border);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    inline-size: 4rem;
    justify-content: center;
    overflow: hidden;
    padding: var(--block-space-half) var(--inline-space-half);
    text-align: center;

    p {
      font-size: var(--text-small);
      font-weight: 700;
      letter-spacing: 0.02em;
      margin: 0;
    }

    /* contribute-form#selectFund toggles this */
    &.is-selected {
      outline: 3px solid oklch(var(--lch-blue-dark) / 50%);
      outline-offset: -1px;
    }

    /* A fund bought recently enough to trigger a wash sale */
    &.is-wash-sale p {
      text-decoration: line-through;
    }
  }

  .contribute-form {
    display: grid;
    gap: var(--block-space);
    margin-block-start: var(--block-space);
    max-inline-size: 28rem;
    padding-block-end: var(--block-space-double);
    padding-inline: var(--inline-space-double);
  }

  .contribute-form__row {
    display: flex;
    gap: var(--inline-space);
  }
}