@layer components {
  .invoice-form {
    --border-color: var(--control-border-color);
    --border-shadow: 0 0 0 1px var(--border-color);
    --field-width: 36;
    --cell-height: calc(var(--font-size) + var(--baseline) * 2);
    --cell-border: var(--line) 0 0 var(--line);
    --cell-border-style: solid;
    --emphasis-header-bg: var(--border-color);

    .type {
      --font-size: calc(var(--baseline) * 4);
      --text-color: var(--border-color);
    }

    .row {
      width: 100%;
      margin-block-end: var(--spacing-xl);

      &:not(.full-width) {
        display: flex;
        justify-content: space-between;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }

    /* Shared column chrome used by both edit form and show view */
    .row:not(.full-width) > div {
      width: calc(var(--baseline) * var(--field-width));

      &.wider {
        --field-width: 40;
      }

      .label {
        --text-color: var(--text-on-emphasis-color);

        display: flex;
        align-items: center;
        height: var(--cell-height);
        padding-inline: var(--spacing-sm);
        background-color: var(--emphasis-header-bg);
        line-height: var(--cell-height);
      }

      .meta-label {
        color: var(--muted-color);
      }
    }

    form {
      & .row:not(.full-width) > div {
        gap: 0;

        &:not(.wider) {
          & > :not(.company-autofill),
          & > div > input:last-child {
            border-inline-end-width: var(--line);
          }

          & > :last-child:not(.company-autofill) {
            border-block-end-width: var(--line);
          }
        }

        & p {
          line-height: var(--cell-height);
        }

        & > :first-child {
          border-start-start-radius: var(--radius-default);
          border-start-end-radius: var(--radius-default);
        }

        & > :last-child:not(.company-autofill) {
          border-end-start-radius: var(--radius-default);
          border-end-end-radius: var(--radius-default);
        }

        /* Autofill hangs below the company field group like "Add line item". */
        &.has-autofill {
          display: flex;
          flex-direction: column;

          & > :nth-last-child(2) {
            border-end-start-radius: var(--radius-default);
            border-end-end-radius: var(--radius-default);
            border-block-end-width: var(--line);
          }
        }

        & > div {
          display: flex;
          align-items: center;
          justify-content: space-between;

          & input {
            width: unset;
          }
        }

        & > .company-autofill {
          --border-color: var(--control-border-color);
          align-self: center;
          border-block-start: none;
          border-start-start-radius: 0;
          border-start-end-radius: 0;
          /* Hangs onto the page background; match it rather than the paper surface. */
          --background-color: var(--page-background);

          &:hover {
            --background-color: var(--page-control-hover-background);
          }
        }
      }
    }

    input:not(input[type="submit"]) {
      width: 100%;
      position: relative;
      border-style: solid;
      border-color: var(--border-color);
      border-width: var(--cell-border);
      border-radius: 0;

      &:focus-visible {
        z-index: 10;
        outline: 2px solid var(--text-color);
        outline-offset: 1px;
      }

      &[aria-invalid="true"] {
        z-index: 5;
        background-color: var(--error-background);
        box-shadow: inset 0 0 0 1px var(--error-field-border-color);
      }

      &[aria-invalid="true"]:focus-visible {
        z-index: 10;
        outline-color: var(--error-focus-color);
      }
    }

    .line-items {
      --line-items-min-rows: 8;
      /* Description | Rate | Qty | Line total | Calculate | Remove */
      --line-grid: 4fr 1fr 1fr 1fr var(--cell-height) var(--cell-height);

      display: flex;
      flex-direction: column;

      & > :first-child,
      .line-items-footer,
      .nested-form-wrapper {
        display: grid;
        grid-template-columns: var(--line-grid);
      }

      & p,
      .totals label {
        display: flex;
        align-items: center;
        height: var(--cell-height);
        padding-inline: var(--spacing-sm);
      }

      & > :first-child {
        border-start-start-radius: var(--radius-default);
        border-start-end-radius: var(--radius-default);
        background-color: var(--emphasis-header-bg);

        & > p {
          --text-color: var(--text-on-emphasis-color);
          background-color: var(--emphasis-header-bg);
        }
      }

      .line-items-body {
        min-height: calc(var(--cell-height) * var(--line-items-min-rows));
        border-inline: var(--line) solid var(--border-color);
        background: var(--surface-color);

        .nested-form-wrapper > :first-child {
          border-inline-start-width: 0;
        }

        .nested-form-wrapper:has(+ [data-nested-form-target="target"])
          > :not([type="hidden"]) {
          box-shadow: 0 var(--line) 0 0 var(--border-color);
        }

        .nested-form-wrapper:has(+ [data-nested-form-target="target"])
          > :not([type="hidden"])[aria-invalid="true"] {
          box-shadow:
            inset 0 0 0 1px var(--error-field-border-color),
            0 var(--line) 0 0 var(--border-color);
        }

        [data-nested-form-target="target"] {
          display: none;
        }
      }

      .line-item-calculate,
      .line-item-remove,
      .totals .link {
        display: flex;
        align-items: center;
        justify-content: center;
        border-style: solid;
        border-color: var(--border-color);
        border-width: var(--cell-border);
        background: var(--surface-color);

        &::before {
          inset-inline: 0;
        }

        &:focus-visible {
          border-radius: inherit;
        }
      }

      .line-item-calculate,
      .line-item-remove {
        width: var(--cell-height);
        height: var(--cell-height);
      }

      .line-item-remove {
        --link-color: var(--danger-color);

        &:hover,
        &:focus-visible {
          z-index: 10;
          color: var(--text-color);
        }
      }

      .line-items-footer {
        & > div {
          background: var(--surface-color);
        }

        & > :first-child {
          display: flex;
          align-items: center;
          justify-content: center;
          border-end-start-radius: var(--radius-default);

          input {
            border: none;
            text-align: center;
          }
        }

        .totals {
          /* Align with Rate | Qty | Line total | Calculate | Remove */
          grid-column: 2 / -1;
          border-end-end-radius: var(--radius-default);

          & > div {
            display: grid;
            /* Label (Rate+Qty) | Value cols | Calculate */
            grid-template-columns: 2fr 1fr var(--cell-height) var(--cell-height);

            label {
              border-style: solid;
              border-color: var(--border-color);
              border-width: var(--cell-border);
            }

            .link {
              width: var(--cell-height);
              height: var(--cell-height);
              border-inline-end-width: var(--line);
            }

            /* Value spans Line total + Calculate columns; button sits in Remove. */
            &:has(.link) input {
              grid-column: 2 / 4;
            }

            &:not(:has(.link)) input {
              grid-column: 2 / -1;
              border-inline-end-width: var(--line);
            }

            &:last-child {
              label,
              input,
              .link {
                border-block-end-width: var(--line);
              }

              label,
              input {
                font-weight: bold;
              }
            }
          }
        }
      }
    }

    .nested-form-add {
      --border-color: var(--control-border-color);
      align-self: center;
      border-block-start: none;
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      /* Hangs onto the page background; match it rather than the paper surface. */
      --background-color: var(--page-background);

      &:hover {
        --background-color: var(--page-control-hover-background);
      }
    }

    /* ── Read-only show variant ────────────────────────────────────── */

    &.invoice-show {
      .row:not(.full-width) > div.wider > div {
        display: flex;
        justify-content: space-between;
        gap: var(--spacing-md);
      }

      .line-items {
        --line-grid: 4fr 1fr 1fr 1fr;

        & > :first-child > p:not(:first-child),
        .nested-form-wrapper > p:not(:first-child) {
          justify-content: flex-end;
          text-align: end;
        }

        .nested-form-wrapper {
          & > p {
            display: flex;
            align-items: center;
            min-height: var(--cell-height);
            padding-inline: var(--spacing-sm);
            border-style: solid;
            border-color: var(--border-color);
            border-width: var(--cell-border);
            background: var(--surface-color);
          }

          & > :first-child {
            border-inline-start-width: 0;
          }

          &:last-child > p {
            box-shadow: 0 var(--line) 0 0 var(--border-color);
          }
        }

        .line-items-footer {
          & > :first-child p {
            padding-inline: var(--spacing-sm);
          }

          .totals > div {
            grid-template-columns: 2fr 1fr;

            & > p {
              display: flex;
              align-items: center;
              min-height: var(--cell-height);
              padding-inline: var(--spacing-sm);
              border-style: solid;
              border-color: var(--border-color);
              border-width: var(--cell-border);
              background: var(--surface-color);
            }

            /* Footer sits outside .line-items-body, so it needs its own right edge. */
            & > :last-child {
              border-inline-end-width: var(--line);
              justify-content: flex-end;
            }

            &:last-child > p {
              border-block-end-width: var(--line);
              font-weight: bold;
            }
          }
        }
      }

      .invoice-contact {
        margin-block-start: var(--spacing-lg);
        text-align: center;

        p {
          max-width: 50%;
          margin-inline: auto;
          color: var(--muted-color);
          font-size: var(--font-size);
          white-space: pre-line;
        }
      }

      .actions-row {
        margin-block-start: var(--spacing-xl);
      }
    }
  }
}