/* Portfolio: one bar per asset class, comparing actual holding against target.
 *
 * A bar has at most two segments — what is held, and the difference to target.
 * Rounding comes from first/last child, so the view doesn't pick a side. */
@layer components {
  .allocations {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .allocation {
    color: inherit;
    display: block;
  }

  .allocation__name {
    font-size: var(--text-normal);
  }

  .allocation__bar {
    align-items: stretch;
    display: flex;
    min-block-size: 1.5rem; /* a bar height, not an icon */
  }

  .allocation__segment {
    background-color: var(--asset-color);
    box-shadow: 0 1px 2px oklch(var(--lch-black) / 25%);

    &:first-child {
      border-start-start-radius: 0.375rem;
      border-end-start-radius: 0.375rem;
    }

    &:last-child {
      border-start-end-radius: 0.375rem;
      border-end-end-radius: 0.375rem;
    }
  }

  /* Held beyond target — the same hue at half strength */
  .allocation__segment--over {
    background-color: color-mix(in srgb, var(--asset-color) 50%, transparent);
  }

  /* The gap up to target — outlined rather than filled */
  .allocation__segment--under {
    background-color: transparent;
    border: 1px solid var(--asset-color);
  }

  .allocation__figures {
    display: flex;
    flex-direction: column;
    margin-inline-start: var(--inline-space);
  }

  .allocation__actual {
    font-size: var(--text-small);
  }

  .allocation__delta {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
  }
}