@layer components {
  .inv-sidebar__due {
    background: var(--color-surface-inverted);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
  }

  .inv-sidebar__due-label {
    color: oklch(from var(--color-ink-inverted) l c h / 55%);
    letter-spacing: 0.1em;
    margin: 0 0 0.375rem;
  }

  .inv-sidebar__due-amount {
    color: var(--color-ink-inverted);
    font-family: var(--font-mono);
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
  }

  .inv-sidebar__due-date {
    color: oklch(from var(--color-ink-inverted) l c h / 45%);
    font-size: 0.8125rem;
    margin: 0;
  }

  .inv-sidebar__section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
  }

  .inv-sidebar__section-title {
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
  }

  .inv-sidebar__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .inv-sidebar__field label,
  .inv-sidebar__field .inv-label {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  /* The sidebar's fields sit in tinted wells, a shade quieter than the editor's. */
  .inv-sidebar__select,
  .inv-sidebar__input {
    background-color: var(--color-surface-tint);
    color: var(--color-ink-secondary);
  }

  /* Currency selector — custom dropdown (flag + code + name + symbol) */
  .inv-currency {
    position: relative;
  }

  .inv-currency__trigger {
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink-secondary);
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    inline-size: 100%;
    padding: 0.625rem 0.875rem;
  }

  .inv-currency__trigger:focus-visible,
  .inv-currency:has(.inv-currency__menu:not([hidden])) .inv-currency__trigger {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
    outline: none;
  }

  .inv-currency__flag {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1;
  }

  .inv-currency__code {
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .inv-currency__name {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inv-currency__chevron {
    color: var(--color-ink-muted);
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  .inv-currency__menu {
    inset-block-start: 100%;
    inset-inline-end: 0;
    inset-inline-start: 0;
    list-style: none;
    margin: 0.35rem 0 0;
    max-block-size: 300px;
    overflow-y: auto;
  }

  .inv-currency__menu li {
    list-style: none;
  }

  .inv-currency__opt-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-inline-size: 0;
  }

  .inv-currency__symbol {
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
    margin-inline-start: auto;
  }

  .inv-currency__check {
    color: var(--color-brand);
    flex-shrink: 0;
    visibility: hidden;
  }

  .inv-currency__option[aria-selected="true"] .inv-currency__check {
    visibility: visible;
  }

  .inv-sidebar__btns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: auto;  /* pushes button to bottom when cards are equal height */
    padding-block-start: 0.75rem;
  }

  .inv-sidebar__email-action {
    display: contents;
  }

  .inv-sidebar__btn {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem;
  }

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

  .inv-sidebar__btn:disabled {
    background: var(--color-canvas);
    border-color: var(--color-border);
    color: var(--color-ink-faint);
    opacity: 1;
  }

  .inv-sidebar__btn:disabled:hover {
    background: var(--color-canvas);
    border-color: var(--color-border);
    color: var(--color-ink-faint);
  }

  /* A filled button in the sidebar keeps the primitive's colours, which the
     quiet sidebar button above would otherwise paint over — until it is
     disabled, when it reads as disabled like any other. */
  .inv-sidebar__btn.btn--primary:not(:disabled) {
    background: var(--color-brand-fill);
    border-color: var(--color-brand-fill);
    color: var(--color-ink-inverted);

    &:hover {
      background: var(--color-brand-fill-strong);
      border-color: var(--color-brand-fill-strong);
      color: var(--color-ink-inverted);
    }
  }

  /* Primary variant — purple border + purple text by default */
  .inv-sidebar__btn--primary {
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  .inv-sidebar__btn--primary:hover {
    background: oklch(from var(--color-brand) l c h / 5%);
  }

  .inv-vat-radios {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
  }

  .inv-vat-radio {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
  }

  .inv-vat-radio input[type="radio"] {
    accent-color: var(--color-brand);
    block-size: 15px;
    flex-shrink: 0;
    inline-size: 15px;
    inset-block-start: -2px;
    position: relative;
  }

  .inv-vat-radio span {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
  }

  /* button_to renders a <form> — push it to card bottom to align with Export btns */
  .inv-sidebar__danger > form {
    margin-block-start: auto;
    padding-block-start: 0.75rem;
  }

  .inv-sidebar__danger-title {
    color: var(--color-negative);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0 0 0.375rem;
    text-transform: uppercase;
  }

  .inv-sidebar__danger-text {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0 0 0.875rem;
  }

  .inv-sidebar__danger-btn {
    background: none;
    color: var(--color-negative);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem;
  }

  .inv-sidebar__danger-btn:hover {
    background: oklch(from var(--color-negative) l c h / 5%);
    border-color: var(--color-negative);
  }

  @media (width < 1024px) {
    /* "To pay" — label on top, the amount larger on the left, date bottom left */
    .inv-sidebar__due {
      align-items: flex-start;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-block-size: 7rem;
    }

    .inv-sidebar__due-label {
      margin: 0;
    }

    .inv-sidebar__due-amount {
      font-size: 2.25rem;
      margin: 0;
    }

    .inv-sidebar__due-date {
      margin-block-start: auto;
    }
  }

  @media (768px <= width < 1024px) {
    /* "To pay" — the amount vertically centred, aligned left */
    .inv-sidebar__due-amount {
      align-items: center;
      display: flex;
      flex: 1;
      font-size: 3rem;
    }
  }

  @media (width < 480px) {
    /* ── Sidebar ──────────────────────────── */
    /* Compact "To pay" dark card */
    .inv-sidebar__due {
      min-block-size: 6rem;
      padding: 0.875rem 1rem;
    }

    .inv-sidebar__due-amount {
      font-size: 2rem;
    }

    /* Section and danger cards */
    .inv-sidebar__section,
    .inv-sidebar__danger {
      padding: 1rem;
    }

    /* Action buttons — side by side in two columns */
    .inv-sidebar__btns {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .inv-sidebar__btn {
      flex: 1 1 calc(50% - 0.25rem);
      font-size: 0.8125rem;
      padding: 0.5rem 0.375rem;
    }
  }

  /* Mobile/tablet — danger zone always fully visible */
  @media (width < 1024px) {
    .inv-due-wrap,
    .inv-danger-wrap {
      display: contents;
    }
  }
}