@layer components {
  /* ── Debug baseline grid ─────────────────────────────────────────── */

  body.grid::after {
    --opacity: 10%;

    content: "";
    display: block;
    position: absolute;
    inset: var(--baseline-offset);
    pointer-events: none;
    z-index: 200;
    background-image:
      linear-gradient(
        to top,
        color-mix(in srgb, var(--baseline-color) var(--opacity), transparent) 0,
        color-mix(in srgb, var(--baseline-color) var(--opacity), transparent)
          1px,
        transparent 1px,
        transparent
      ),
      linear-gradient(
        to right,
        color-mix(in srgb, var(--baseline-color) var(--opacity), transparent) 0,
        color-mix(in srgb, var(--baseline-color) var(--opacity), transparent)
          1px,
        transparent 1px,
        transparent
      );
    background-size:
      100% var(--baseline),
      var(--baseline) 100%;
  }

  /* ── Top account nav ─────────────────────────────────────────────── */

  body > nav {
    display: flex;
    justify-content: end;
    margin-block-end: var(--spacing-md);

    & > div {
      display: flex;
      flex-direction: column;
      align-items: end;
    }
  }

  /* ── Page shell: left rail | center paper | right rail ────────────── */

  .page-shell {
    --sidebar-width: calc(var(--baseline) * 28);
    --shell-gap: var(--spacing-lg);

    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, calc(var(--baseline) * var(--container-multiplier)))
      minmax(0, 1fr);
    gap: var(--shell-gap);
    align-items: start;
    width: 100%;
    max-width: calc(
      var(--baseline) * var(--container-multiplier) + var(--sidebar-width) * 2 +
        var(--shell-gap) * 2
    );
    margin-inline: auto;

    /* Wide center column (invoices). Set via content_for :shell_class. */
    &.wide {
      --container-multiplier: 128;
      --content-padding: var(--spacing-2xl);
    }

    & > aside {
      min-width: 0;
      width: min(100%, var(--sidebar-width));
      position: sticky;
      top: var(--spacing-md);

      &:first-of-type {
        justify-self: end;
      }

      &:last-of-type {
        justify-self: start;
      }

      /* Side rails accept a bare <nav> of actions/links. */
      & > nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        margin: 0;
        margin-block-start: var(--spacing-lg);

        a,
        .link {
          display: block;
        }

        & .action {
          align-self: flex-end;
          background-color: color-mix(
            in oklch,
            var(--link-color) 10%,
            transparent
          );
          line-height: calc(var(--font-size) + var(--baseline) * 2);
          min-height: calc(var(--font-size) + var(--baseline) * 2);
          padding-inline: var(--spacing-md);
          border-radius: var(--radius-default);

          &:hover {
            --hover-color: color-mix(
              in oklch,
              var(--link-color) 10%,
              transparent
            );
          }

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

    & > main {
      width: 100%;
      min-width: 0;
      max-width: none;
      margin-inline: 0;
    }

    @media (max-width: 64rem) {
      display: flex;
      flex-direction: column;
      max-width: calc(var(--baseline) * var(--container-multiplier));

      & > aside {
        position: static;
        width: 100%;
        justify-self: stretch;

        &:first-of-type {
          order: 1;
        }

        &:last-of-type {
          order: 3;
        }

        & > nav .action {
          align-self: flex-start;
        }
      }

      & > main {
        order: 2;
      }
    }
  }

  /* ── Center paper ────────────────────────────────────────────────── */

  .paper {
    position: relative;
    background: var(--surface-color);
    box-shadow: var(--border-shadow);
    border-radius: var(--radius-default);

    & > .content {
      padding: var(--content-padding);
    }
  }

  /* ── In-paper toolbar ────────────────────────────────────────────── */

  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    box-shadow: 0 1px 0 var(--border-color);

    & > .breadcrumbs,
    & > .actions {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    & > .actions {
      a,
      .link {
        --text-color: var(--gray-950);
      }
    }
  }

  /* ── Shared form error banner ────────────────────────────────────── */

  .form-errors {
    margin-block-end: var(--spacing-xl);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--error-background);
    box-shadow: 0 0 0 1px var(--error-border-color);
    border-radius: var(--radius-default);
    color: var(--error-color);

    & > p {
      color: var(--error-color);
      font-weight: 600;
      margin-block-end: var(--spacing-sm);
    }

    & > ul {
      margin: 0;
      padding-inline-start: var(--spacing-lg);
    }
  }

  /* ── Horizontal action rows (address edit/cancel, invoice back, …) ─ */

  .actions-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;

    form + &,
    :not(.actions-row) + & {
      margin-block-start: var(--spacing-md);
    }
  }

  /* ── Debug toolbar ───────────────────────────────────────────────── */

  .debug-toolbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding: var(--baseline);
    display: flex;
    gap: var(--baseline);

    & button.active {
      --text-color: var(--gray-950);
      --border-color: var(--gray-700);
      --background-color: var(--gray-200);

      &:hover {
        --background-color: var(--gray-300);
      }
    }
  }

  lexxy-editor {
    --lexxy-radius: 0px;
  }
}