@layer components {
  .inv-parties {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1px 1fr;
    margin-block-start: 1.75rem;
    overflow: visible;
    padding: 0;
  }

  /* A card with a single party — the bill's supplier — spans the full width. */
  .inv-parties--single {
    grid-template-columns: 1fr;
  }

  .inv-party {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-inline-size: 0;
    padding: 1.25rem 1.5rem;
  }

  .inv-party-divider {
    background: repeating-linear-gradient(
      to bottom,
      var(--color-border-strong) 0,
      var(--color-border-strong) 4px,
      transparent 4px,
      transparent 8px
    );
    inline-size: 1px;
  }

  .inv-party__head {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
  }

  .inv-party__icon {
    align-items: center;
    block-size: 24px;
    border-radius: var(--radius-xs);
    display: flex;
    flex-shrink: 0;
    inline-size: 24px;
    justify-content: center;
  }

  /* The two roles' chips are the same size and shape; the issuer's is filled
     with the brand, the client's tinted, so the glyph is not the only thing
     telling them apart. */
  .inv-party__icon--supplier {
    background: var(--color-brand-fill);
    color: var(--color-ink-inverted);
  }

  .inv-party__icon--client {
    background: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .inv-party__title {
    color: var(--color-ink);
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
  }

  .inv-party-section {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-block-end: 0.25rem;
  }

  /* Two classes: the field-set's own grid gap is set in field-sets.css. */
  .inv-party .field-set,
  .inv-party-section .field-set {
    gap: 0.5rem 0.5rem;
  }

  .inv-party .field-set > div,
  .inv-party-section .field-set > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  /* A size down from the micro-label: the card packs its fields tight. */
  .inv-party .field-set label,
  .inv-party-section label,
  .inv-party-section .inv-label {
    font-size: 0.625rem;
  }

  /* Compact inputs inside party detail sections */
  .inv-party .field-set input[class~="inv-input"],
  .inv-party .field-set select[class~="inv-input"],
  [data-invoices--party-target="details"] .inv-input {
    font-size: 0.875rem;
    padding: 0.425rem 0.625rem;
  }

  .inv-party-sep {
    background: repeating-linear-gradient(
      to right,
      var(--color-border-strong) 0,
      var(--color-border-strong) 4px,
      transparent 4px,
      transparent 8px
    );
    block-size: 1px;
    border: none;
    margin: 0.75rem -1.5rem;

    @media (width >= 768px) {
      display: none;
    }
  }

  .inv-party__name-wrap {
    margin-block-end: 0.875rem;
    position: relative;
  }

  /* "Fill in manually" button below the client search */
  .inv-party__manual-btn {
    align-items: center;
    background: var(--color-surface-tint);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-brand);
    cursor: pointer;
    display: flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.4rem;
    inline-size: 100%;
    justify-content: center;
    margin-block-end: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: background 0.15s, border-color 0.15s;
  }

  .inv-party__manual-btn:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
  }

  .inv-party__hint-wrap[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
  }

  .inv-party__hint {
    --hint-accent: var(--color-brand);
    --hint-background: var(--color-surface-tint);

    align-items: flex-start;
    background: var(--hint-background);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    display: flex;
    font-size: 0.8125rem;
    gap: 0.6rem;
    line-height: 1.45;
    margin-block-end: 0.875rem;
    padding: 0.6rem 0.75rem;
  }

  .inv-party__hint-dot {
    background: var(--hint-accent);
    block-size: 0.5rem;
    border-radius: 50%;
    flex: none;
    inline-size: 0.5rem;
    margin-block-start: 0.4em;
  }

  .inv-party__hint-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: 0;
  }

  .inv-party__hint-text {
    margin: 0;
  }

  .inv-party__hint-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .inv-party__hint-action {
    background: none;
    border: 0;
    color: var(--hint-accent);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .inv-party__hint-action--quiet {
    color: var(--color-ink-muted);
    font-weight: 400;
  }

  /* "— or —" between the two answers a drift hint offers */
  .inv-party__hint-or {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 600;
    gap: 0.6rem;
    letter-spacing: 0.08em;
    margin-block: 0.15rem;
    text-transform: uppercase;
  }

  .inv-party__hint-or::before,
  .inv-party__hint-or::after {
    background: color-mix(in srgb, var(--hint-accent) 25%, transparent);
    block-size: 1px;
    content: "";
    flex: 1;
  }

  .inv-party__hint-candidates,
  .inv-party__hint-diff {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Each candidate is a choice of its own, so give them room to read apart */
  .inv-party__hint-candidates {
    gap: 0;
    margin-block: 0.25rem;
  }

  .inv-party__hint-candidate {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block: 0.6rem;

    & + & {
      border-block-start: 1px solid color-mix(in srgb, var(--hint-accent) 12%, transparent);
    }
  }

  .inv-party__hint-candidate-name {
    font-weight: 600;
  }

  .inv-party__hint-candidate-meta,
  .inv-party__hint-diff-label {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
  }

  /* A blank side of a diff row: a boxed cross sitting on the text baseline */
  .inv-party__hint-diff-empty {
    color: color-mix(in srgb, var(--color-ink-muted) 65%, transparent);
    display: inline-flex;
    margin-inline-start: 0.15em;
    vertical-align: -0.1em;
  }

  /* Group heading inside the suggestions dropdown: directory vs registry */
  .inv-sug-group {
    background: var(--color-surface-tint);
    padding: 0.35rem 0.875rem;
  }

  .inv-party__name-input {
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.5rem 0.625rem;
  }

  /* The suggestions box (`suggestions_search_tag`): the wrapper is what the
     results list hangs off, so it is positioned here, once, for every page
     the box is on; in the party field it fills the name-wrap. */
  .inv-sug {
    position: relative;
  }

  .inv-party__name-wrap > .inv-sug {
    inline-size: 100%;
  }

  /* The query input reads like the party name input: bold, at the editor's height. */
  .inv-sug-query {
    font-size: 0.9375rem;
    font-weight: 600;
    min-block-size: var(--inv-input-height);
    padding: 0.5rem 0.625rem;
  }

  .inv-sug-query::placeholder {
    font-weight: 400;
  }

  /* Results dropdown — grows to fit the suggestion names (at least the field
     width, capped to the viewport) so long company names stay readable on
     narrow mobile fields instead of wrapping to several lines. */
  .inv-sug-results {
    border-color: var(--color-border);
    border-width: 1.5px;
    inline-size: max-content;
    inset-block-start: calc(100% + 4px);
    inset-inline-end: auto;
    inset-inline-start: 0;
    max-block-size: 220px;
    max-inline-size: min(90vw, 700px);
    min-inline-size: 100%;
    overflow-y: auto;
    padding: 0;
  }

  /* No saved templates: render nothing rather than an empty bordered box. */
  .inv-sug-results:not(:has(.inv-sug-item)) {
    display: none;
  }

  /* Suggestion item */
  .inv-sug-item {
    align-items: stretch;
    border-block-end: 1px solid var(--color-border-subtle);
    display: flex;
    transition: background 0.1s;
  }

  .inv-sug-item:last-child {
    border-block-end: none;
  }

  .inv-sug-item__view {
    align-items: stretch;
    display: flex;
    flex: 1;
    min-inline-size: 0;
  }

  /* ✎ rename control — matches the × delete button but hints at editing on hover */
  .inv-sug-item__rename {
    align-self: center;
  }

  .inv-sug-item__main {
    cursor: pointer;
    flex: 1;
    min-inline-size: 0;
    padding: 0.625rem 0.875rem;
  }

  /* A row that carries a flag keeps its name and meta line in the first
     column, the flag beside both, centred on the row and close to its edge. */
  .inv-sug-item__main:has(.inv-sug-item__flag) {
    column-gap: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .inv-sug-item__flag {
    align-self: center;
    font-size: 1.125rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    line-height: 1;
  }

  .inv-sug-item__main:hover,
  .inv-sug-item__main[aria-selected="true"],
  .inv-sug-item[aria-selected="true"] {
    background: var(--color-surface-tint);
  }

  /* × delete control — a small square button, quiet until hover then destructive.
     Same treatment as the invoice-template menu's delete button. */
  .inv-sug-item__delete {
    align-self: center;
    margin-inline-end: 0.25rem;
  }

  .inv-sug-item__name {
    color: var(--color-ink);
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .inv-sug-item__meta {
    color: var(--color-ink-muted);
    display: block;
    font-size: 0.75rem;
    margin-block-start: 0.125rem;
  }

  /* Empty state — no matching contacts. Kept visually quiet so it reads as an
     absence of results rather than a selectable item. */
  .inv-sug-empty {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    padding: 1.5rem 0.875rem;
    text-align: center;
  }

  .inv-sug-empty__icon {
    block-size: 1.75rem;
    color: var(--color-ink-faint);
    inline-size: 1.75rem;
  }

  .inv-sug-empty__text {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  /* ── Party field-sets: mobile + tablet — a wrapping row of fields, each
     sized by its text; desktop (≥1024px) keeps the static grid in
     field-sets.css, where the inputs fill their column. ── */
  @media (width < 1024px) {
    .inv-party .field-set,
    .inv-party-section .field-set {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem 0.75rem;
    }

    /* Items keep their own width but may shrink: a lone field wider than
       the card (the register entry's long placeholder) then fits the card,
       and its `max-inline-size: 100%` resolves against the shrunk item. */
    .inv-party .field-set > *,
    .inv-party-section .field-set > * {
      flex: 0 1 auto;
      min-inline-size: 0;
    }

    .inv-party .field-set input[class~="inv-input"],
    .inv-party-section .field-set input[class~="inv-input"] {
      field-sizing: content;
      inline-size: auto;
      max-inline-size: 100%;
    }
  }

  @media (width < 768px) {
    /* Supplier + Client → two separate cards stacked */
    .inv-parties {
      background: transparent;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 0;
    }

    .inv-party {
      background: var(--color-surface);
      border-radius: var(--radius-lg);
    }

    /* The line between them is replaced by the gap — hidden */
    .inv-party-divider {
      display: none;
    }
  }

  @media (width < 480px) {
    /* .inv-card { padding: 1rem } would override the zero from the 768px rule
       — zeroed explicitly */
    .inv-parties {
      padding: 0;
    }

    /* ── Party padding — tighter on the smallest screens ── */
    .inv-party {
      padding: 1rem;
    }

    /* Party separators — compensate for new padding */
    .inv-party-sep {
      margin: 0.75rem -1rem;
    }
  }
}