@layer components {

  /* ─── Starting a credit note from its invoice ───── */

  .credit-start {
    position: relative;
  }

  .credit-start__menu {
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: 0;
  }

  /* Opened at the bottom of the viewport, the panel rises over the button. */
  .credit-start__menu--above {
    inset-block-end: calc(100% + 0.5rem);
    inset-block-start: auto;
  }

  .credit-start__item {
    align-items: start;
    flex-direction: column;
    gap: 0.125rem;
  }

  .credit-start__label {
    color: var(--color-ink);
    font-weight: 600;
  }

  .credit-start__hint {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
  }

  /* "— or —" before the start that cancels the invoice rather than credits it */
  .credit-start__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.25rem;
    padding-inline: 0.625rem;
    text-transform: uppercase;

    &::before,
    &::after {
      background: var(--color-border-subtle);
      block-size: 1px;
      content: "";
      flex: 1;
    }
  }

  /* ─── The invoice's credit notes ───────────────── */

  .credit-notes-section__list {
    display: grid;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .credit-notes-section__item {
    align-items: baseline;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
  }

  .credit-notes-section__link {
    color: var(--color-link);
    font-weight: 600;
  }

  .credit-notes-section__date {
    color: var(--color-ink-muted);
  }

  .credit-notes-section__amount {
    margin-inline-start: auto;
  }

  .credit-notes-section__totals {
    border-block-start: 1px solid var(--color-border-subtle);
    display: grid;
    font-size: 0.875rem;
    gap: 0.25rem 1rem;
    grid-template-columns: 1fr auto;
    margin: 0.75rem 0 0;
    padding-block-start: 0.75rem;

    dt {
      color: var(--color-ink-secondary);
    }

    dd {
      font-weight: 600;
      margin: 0;
      text-align: end;
    }
  }

  /* ─── How far an invoice is credited ───────────── */

  .credit-state {
    background: var(--color-warning-tint);
    border-radius: var(--radius-pill);
    color: var(--color-warning);
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.125rem 0.625rem;
  }

  .credit-state--full {
    background: var(--color-negative-tint);
    color: var(--color-negative-strong);
  }
}

@layer components {

  /* ─── The credit-note editor ───────────────────── */

  .credit-subtitle {
    color: var(--color-ink-secondary);
    font-size: 0.9375rem;
    margin: 0;
  }

  .credit-subtitle__link {
    color: var(--color-link);
    font-weight: 600;
  }

  /* The number in the header card: the invoice's number inputs, read only. */
  .credit-doc-num {
    color: var(--color-brand);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
  }

  .credit-parties {
    display: grid;
    gap: 1.5rem 2.5rem;
    grid-template-columns: 1fr;
    padding: 1.25rem;

    @media (width >= 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* A party as the PDF prints it, under the invoice editor's head: a rule
     under the head — the brand for the supplier, ink for the client — then
     the name, the address and the identifiers in figures. */
  .credit-party {
    --party-accent: var(--color-ink);
    --party-rule: 1.5px;
  }

  .credit-party--supplier {
    --party-accent: var(--color-brand);
    --party-rule: 2px;
  }

  .credit-party .inv-party__head {
    border-block-end: var(--party-rule) solid var(--party-accent);
    margin-block-end: 0.75rem;
    padding-block-end: 0.625rem;
  }

  .credit-party__name {
    color: var(--color-ink);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
  }

  .credit-party__register {
    color: var(--color-ink-secondary);
    font-size: 0.75rem;
    margin: 0 0 0.375rem;
  }

  .credit-party__lines {
    color: var(--color-ink-secondary);
    display: grid;
    font-size: 0.9375rem;
    margin: 0 0 0.5rem;
  }

  .credit-party__lines--identifiers {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  /* The client's address and refund account, edited in the side column. */
  .credit-sidebar-field {
    margin-block: 0.75rem;
  }

  /* The export card's three parts — the PDF, the email, the e-credit note —
     stand 2rem apart, the client's address 0.75rem over its button, as
     the language stands over the download. The card's own gap gives the
     first 0.875rem of the step. */
  .credit-sidebar-mailing {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-start: 1.125rem;
  }

  .credit-list {
    margin-block-start: 1.25rem;
    padding: 1.25rem;
  }

  .credit-list__rows {
    display: grid;
  }

  .credit-list__empty {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin: 0.5rem 0 1rem;
  }

  .credit-list__error {
    background: var(--color-negative-tint);
    border: 1px solid var(--color-negative-border);
    border-radius: var(--radius-sm);
    color: var(--color-negative-strong);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
  }

  .credit-list__actions {
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.25rem;
    padding-block-start: 0.875rem;
  }

  .credit-row {
    align-items: center;
    background: var(--color-surface);
    display: grid;
    gap: 0.5rem 0.75rem;
    grid-template-areas:
      "drag description description remove"
      "drag sizing left total";
    grid-template-columns: auto auto 1fr auto;
    padding-block: 0.75rem;

    @media (width >= 1024px) {
      grid-template-areas: "drag description sizing left total remove";
      grid-template-columns: auto minmax(0, 2fr) auto minmax(0, 1fr) auto auto;
    }
  }

  /* Rows are divided from each other; the line under the last one is the
     actions bar's. */
  .credit-row + .credit-row {
    border-block-start: 1px solid var(--color-border-subtle);
  }

  /* Lifted under the finger while dragged (`invoices--line-items-reorder`). */
  .credit-row.is-dragging {
    border-block-start-color: transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    opacity: 0.97;
    padding-inline: 0.5rem;
  }

  .credit-row__drag {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    align-items: center;
    align-self: stretch;
    color: var(--color-ink-faint);
    cursor: grab;
    display: flex;
    grid-area: drag;
    touch-action: none;
    user-select: none;

    &:active {
      cursor: grabbing;
    }
  }

  .credit-row__description {
    grid-area: description;
    min-inline-size: 0;
  }

  .credit-row__sizing {
    display: grid;
    gap: 0.25rem;
    grid-area: sizing;
  }

  .credit-row__field {
    align-items: center;
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 0.875rem;
    gap: 0.375rem;
  }

  .credit-row__input {
    inline-size: 6rem;
    text-align: end;
  }

  /* Money and share in one field, split by a hairline: each half is a form
     of its own, the border is the pair's. */
  .credit-row__joined {
    background: var(--color-surface-tint);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;

    &:has(:focus) {
      border-color: var(--color-brand);
    }

    &:has(.input-error) {
      border-color: var(--color-negative);
    }
  }

  .credit-row__joined-part {
    align-items: center;
    color: var(--color-ink-secondary);
    display: flex;
    gap: 0.25rem;
    padding-inline: 0.75rem;

    & + & {
      border-inline-start: 1px solid var(--color-border);
    }
  }

  .credit-row__joined-input {
    background: transparent;
    block-size: var(--inv-input-height);
    border: none;
    color: var(--color-ink);
    font: inherit;
    inline-size: 5.5rem;
    outline: none;
    padding: 0;
    text-align: end;
  }

  .credit-row__joined-input--percent {
    inline-size: 3.5rem;
  }

  .credit-row__left {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    grid-area: left;
    margin: 0;
  }

  .credit-row__total {
    font-weight: 600;
    grid-area: total;
    margin: 0;
    text-align: end;
  }

  .credit-row__remove-form {
    grid-area: remove;
  }

  .credit-picker {
    position: relative;
  }

  .credit-picker__menu {
    display: grid;
    gap: 0.25rem;
    inline-size: min(92vw, 420px);
    inset-block-end: calc(100% + 0.5rem);
    inset-inline-start: 0;
    max-block-size: 60dvh;
    overflow-y: auto;
  }

  .credit-picker__line {
    border-block-end: 1px solid var(--color-border-subtle);
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0.625rem;
  }

  .credit-picker__line:last-child {
    border-block-end: none;
  }

  .credit-picker__name {
    color: var(--color-ink);
    font-weight: 600;
    margin: 0;
  }

  .credit-picker__left {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin: 0;
  }

  .credit-picker__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .credit-picker__bracket {
    justify-content: space-between;
  }

  .credit-reason-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .credit-reason__fields {
    row-gap: 1.25rem;
  }

  .credit-reason {
    line-height: 1.5;
    resize: vertical;
  }

  .credit-currency {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin: 0.75rem 0 0;
  }
}

@layer components {

  /* ─── Credit notes in the invoice list ─────────── */

  /* A credit note sits under the invoice it corrects, set in and quieter. */
  .doc-row--credit-note {
    background: var(--color-surface-tint);

    .doc-cell--number {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
      padding-inline-start: 1.25rem;
    }

    .doc-cell--number a {
      font-size: 1rem;
    }
  }

  .credit-badge {
    background: var(--color-brand-tint);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.0625rem 0.5rem;
  }

  .doc-cell--number .credit-state {
    display: block;
    font-size: 0.6875rem;
    inline-size: fit-content;
    margin-block-start: 0.25rem;
  }
}

@layer components {

  /* ─── A row's state as a dot, on a phone ───────── */

  /* The pills crowd the narrow number column on a phone, so there a dot
     stands in for each and its label opens in a bubble. */
  .doc-mark {
    display: none;
    position: relative;
  }

  /* The button is a tap's worth of square; the dot is drawn inside it. */
  .doc-mark__dot {
    --doc-mark-color: var(--color-brand);

    align-items: center;
    background: none;
    block-size: 1.5rem;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    inline-size: 1.5rem;
    justify-content: center;
    padding: 0;

    &::after {
      background: var(--doc-mark-color);
      block-size: 0.5rem;
      border-radius: var(--radius-pill);
      content: "";
      inline-size: 0.5rem;
    }
  }

  .doc-mark__dot--warning {
    --doc-mark-color: var(--color-warning);
  }

  .doc-mark__dot--negative {
    --doc-mark-color: var(--color-negative);
  }

  .doc-mark__label {
    color: var(--color-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-start: 0;
    padding: 0.375rem 0.625rem;
    white-space: nowrap;
  }

  @media (width < 768px) {
    .doc-row .doc-cell--number {
      align-items: center;
      display: flex;
      gap: 0.125rem;
    }

    .doc-row .doc-cell--number :is(.credit-state, .credit-badge) {
      display: none;
    }

    .doc-mark {
      display: inline-flex;
    }

    .doc-row--credit-note .doc-cell--number {
      flex-wrap: nowrap;
      padding-inline-start: 0.75rem;
    }
  }
}