@layer components {
  .inv-filter {
    align-items: center;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-inline-size: 0;
    position: relative;
  }

  /* A chip is a fieldset — its fields are disabled with it while it is out of
     use — with its panel folded in a <details>; both lose their default chrome. */
  .inv-chip {
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: inline-flex;
    font-size: 0.875rem;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
    position: relative;
  }

  .inv-chip:has(.inv-chip__details[open]) {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
  }

  .inv-chip__main {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-ink-secondary);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    gap: 0.4rem;
    list-style: none;
    padding: 0.5rem 0.65rem 0.5rem 0.8rem;
  }

  .inv-chip__main::-webkit-details-marker,
  .inv-filter__addbtn::-webkit-details-marker {
    display: none;
  }

  .inv-chip__cat {
    font-weight: 600;
  }

  /* Category icon — hidden on desktop (the text name shows instead), on a
     phone it replaces the text (see the phone rule below). */
  .inv-chip__icon {
    align-items: center;
    display: none;
  }

  .inv-chip__icon svg {
    block-size: 16px;
    display: block;
    inline-size: 16px;
  }

  .inv-chip__sep {
    color: var(--color-ink-faint);
  }

  .inv-chip__val {
    color: var(--color-brand);
    font-weight: 700;
  }

  .inv-chip__val--empty {
    color: var(--color-ink-muted);
    font-weight: 600;
  }

  .inv-chip__chev {
    color: var(--color-ink-muted);
    transition: transform 0.15s;
  }

  .inv-chip__details[open] .inv-chip__chev {
    transform: rotate(180deg);
  }

  .inv-chip__divider {
    align-self: stretch;
    border-inline-start: 1px solid var(--color-border-subtle);
    margin: 0.35rem 0;
  }

  .inv-chip__clear {
    align-items: center;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    display: inline-flex;
    padding: 0.5rem 0.6rem;
  }

  .inv-chip__clear:hover {
    color: var(--color-brand);
  }

  .inv-fpanel {
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    min-inline-size: 290px;
    padding: 0.5rem;

    @media (width < 480px) {
      min-inline-size: min(84vw, 320px);
    }
  }

  .inv-fpanel--menu {
    min-inline-size: 220px;
  }

  .inv-fpanel--amount {
    min-inline-size: 270px;
  }

  .inv-fpanel__label {
    margin: 0.35rem 0.6rem;
  }

  /* An option is a label over its radio: the radio keeps the keyboard (arrows
     walk the group, the focus ring shows on the row), the row draws the state. */
  .inv-opt {
    gap: 0.7rem;
    padding: 0.55rem 0.65rem;
  }

  .inv-opt:has(:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
  }

  .inv-opt__radio {
    block-size: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: 18px;
    position: relative;
  }

  .inv-opt:has(:checked) .inv-opt__radio {
    border-color: var(--color-brand);
  }

  .inv-opt:has(:checked) .inv-opt__radio::after {
    background: var(--color-brand);
    border-radius: 50%;
    content: "";
    inset: 3px;
    position: absolute;
  }

  .inv-opt__label {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
  }

  .inv-subrow {
    border: none;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    min-inline-size: 0;
    padding: 0.15rem 0.65rem 0.5rem 2.35rem;
  }

  /* The month and year only apply — and only show — with the specific month picked. */
  .inv-subrow:disabled {
    display: none;
  }

  .inv-field-wrap {
    flex: 1;
    position: relative;
  }

  .inv-field-wrap::after {
    block-size: 7px;
    border-block-end: 1.5px solid var(--color-ink-muted);
    border-inline-end: 1.5px solid var(--color-ink-muted);
    content: "";
    inline-size: 7px;
    inset-block-start: 40%;
    inset-inline-end: 0.75rem;
    pointer-events: none;
    position: absolute;
    transform: rotate(45deg);
  }

  .inv-select {
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-surface-tint);
    color: var(--color-ink-secondary);
    cursor: pointer;
    padding: 0.5rem 2rem 0.5rem 0.7rem;
  }

  .inv-field-search {
    background: var(--color-surface-tint);
    color: var(--color-ink-secondary);
    inline-size: calc(100% - 1rem);
    margin: 0.35rem 0.5rem 0.4rem;
  }

  .inv-clientlist {
    max-block-size: 240px;
    overflow-y: auto;
  }

  .inv-amount-row {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.6rem 0.5rem;
  }

  .inv-amount-field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
  }

  .inv-amount-field span {
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    padding-inline-start: 0.15rem;
  }

  .inv-amount-field input {
    background: var(--color-surface-tint);
    color: var(--color-ink-secondary);
  }

  .inv-filter__add {
    position: relative;
  }

  .inv-filter__addbtn {
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-brand);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.4rem;
    list-style: none;
    padding: 0.5rem 0.85rem;
    transition: background 0.15s, border-color 0.15s;
  }

  .inv-filter__addbtn:hover {
    background: var(--color-surface-tint);
    border-color: var(--color-border-strong);
  }

  .inv-menu-item__icon {
    align-items: center;
    color: var(--color-brand);
    display: inline-flex;
    flex-shrink: 0;
  }

  @media (width < 768px) {
    /* The filter mustn't grow — so the manage group sits right next to it
       (and wraps below when it doesn't fit). */
    .inv-filter {
      flex: 0 1 auto;
    }

    /* On a phone the chip shows the category icon instead of the text; the
       name stays for screen readers only and the "·" separator is dropped. */
    .inv-chip__icon {
      display: inline-flex;
    }

    .inv-chip__sep {
      display: none;
    }

    .inv-chip__cat {
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }
}