@layer components {
  .btn {
    --gap: 0.4375rem;
    --inline-size: 7.875rem;
    --min-inline-size: 2rem;
    --min-block-size: 2rem;
    --padding-block: 0.75rem;
    --padding-inline: 1rem;
    --background-color: transparent;
    --background-color-on-hover: transparent;
    --background-color-on-focus: var(--background-color-on-hover);
    --border-inline-size: 0.0625rem;
    --border-style: solid;
    --border-color: transparent;
    --border-color-on-hover: transparent;
    --border-color-on-focus: var(--border-color-on-hover);
    --border-radius: 0.375rem;
    --outline-inline-size: 0;
    --outline-style: solid;
    --outline-offset: 0;
    --outline-color: color-mix(in oklab, var(--background-color-on-focus), transparent 75%);
    --color: var(--clr-info-600);
    --color-on-hover: var(--color);
    --color-on-focus: var(--color-on-hover);
    --font-size: 0.875rem;
    --font-weight: 600;
    --line-height: 1;
    --transition-duration: 0.3s;
    --transition-timing-function: ease;
    --text-decoration: none;
    --text-transform: uppercase;
    --opacity: 1;

    --icon-font-size: inherit;
    --icon-line-height: inherit;

    --spinner-size: calc(var(--min-block-size) / 2.625);
    --spinner-border-color: var(--clr-neutral-700);
    --spinner-speed: 0.6s;

    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    inline-size: min(100%, var(--inline-size));
    min-inline-size: var(--min-inline-size);
    min-block-size: var(--min-block-size);
    padding: var(--padding-block) var(--padding-inline);
    background-color: var(--background-color);
    border: var(--border-inline-size) var(--border-color) var(--border-style);
    border-radius: var(--border-radius);
    outline: var(--outline-inline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset);
    color: var(--color);
    font-size: var(--font-size);
    font-variation-settings: "wght" var(--font-weight);
    line-height: var(--line-height);
    text-decoration: none;
    text-align: center;
    text-transform: var(--text-transform);
    white-space: nowrap;
    opacity: var(--opacity);

    &,
    & > * {
      transition: all var(--transition-duration) var(--transition-timing-function);
    }

    & > i {
      font-size: var(--icon-font-size);
      line-height: var(--icon-line-height);
      transition: none;
    }

    &:hover {
      background-color: var(--background-color-on-hover);
      border-color: var(--border-color-on-hover);
      color: var(--color-on-hover);
    }

    &:is(:focus, :focus-within) {
      background-color: var(--background-color-on-focus);
      border-color: var(--border-color-on-focus);
      color: var(--color-on-focus);
    }

    &:is(:focus, :focus-within, :hover) {
      --outline-inline-size: 0.25rem;

      text-decoration: none;
    }

    /* Appearance */

    &.-brand-100 {
      --background-color: var(--clr-brand-100);
      --background-color-on-hover: var(--clr-brand-200);
      --border-color: var(--clr-brand-100);
      --border-color-on-hover: var(--clr-brand-200);
      --color: var(--clr-brand-700);

      --spinner-border-color: var(--clr-brand-600);
    }

    &.-accent-300 {
      --background-color: var(--clr-brand-200);
      --background-color-on-hover: var(--clr-brand-300);
      --border-color: var(--clr-brand-200);
      --border-color-on-hover: var(--clr-brand-300);
      --color: var(--clr-brand-800);
      --color-on-hover: var(--clr-brand-900);

      --spinner-border-color: var(--clr-brand-400);

      &.inverse {
        --background-color-on-hover: var(--clr-brand-100);
        --border-color-on-hover: var(--clr-brand-100);
      }
    }

    &.-accent-700 {
      --background-color: var(--clr-brand-700);
      --background-color-on-hover: var(--clr-brand-800);
      --border-color: var(--clr-brand-700);
      --border-color-on-hover: var(--clr-brand-800);
      --color: var(--clr-brand-100);
      --color-on-hover: var(--clr-brand-200);

      --spinner-border-color: var(--clr-brand-400);
    }

    &.-accent-800 {
      --background-color: var(--clr-brand-800);
      --background-color-on-hover: var(--clr-brand-900);
      --border-color: var(--clr-brand-800);
      --border-color-on-hover: var(--clr-brand-900);
      --color: var(--clr-brand-100);
      --color-on-hover: var(--clr-brand-200);

      --spinner-border-color: var(--clr-accent-200);
    }

    &.-accent-900 {
      --background-color: var(--clr-brand-900);
      --background-color-on-hover: var(--clr-brand-950);
      --border-color: var(--clr-brand-900);
      --border-color-on-hover: var(--clr-brand-950);
      --color: var(--clr-brand-100);
      --color-on-hover: var(--clr-brand-200);

      --spinner-border-color: var(--clr-brand-400);
    }

    &.-neutral {
      --background-color: var(--clr-neutral-50);
      --background-color-on-hover: var(--clr-neutral-200);
      --border-color: var(--clr-neutral-50);
      --border-color-on-hover: var(--clr-neutral-200);
      --color: var(--clr-neutral-600);

      --spinner-border-color: var(--clr-neutral-700);
    }

    &.-neutral-100 {
      --background-color: var(--clr-neutral-100);
      --background-color-on-hover: var(--clr-neutral-200);
      --border-color: var(--clr-neutral-100);
      --border-color-on-hover: var(--clr-neutral-200);
      --color: var(--clr-brand-700);

      --spinner-border-color: var(--clr-brand-800);
    }

    &.-neutral-300 {
      --background-color: var(--clr-neutral-300);
      --background-color-on-hover: var(--clr-neutral-400);
      --border-color: var(--clr-neutral-300);
      --border-color-on-hover: var(--clr-neutral-400);
      --color: var(--clr-neutral-700);

      --spinner-border-color: var(--clr-neutral-700);
    }

    &.-success {
      --background-color: var(--clr-success-200);
      --background-color-on-hover: var(--clr-success-700);
      --border-color: var(--clr-success-200);
      --border-color-on-hover: var(--clr-success-700);
      --color: var(--clr-success-700);
      --color-on-hover: var(--clr-success-50);

      --spinner-border-color: var(--clr-success-50);
    }

    &.-success-outline {
      --background-color: color-mix(in oklab, var(--clr-success-500), transparent 90%);
      --background-color-on-hover: color-mix(in oklab, var(--clr-success-500), transparent 85%);
      --border-color: color-mix(in oklab, var(--clr-success-500), transparent 60%);
      --border-color-on-hover: color-mix(in oklab, var(--clr-success-500), transparent 50%);
      --color: var(--clr-success-400);
      --color-on-hover: var(--clr-success-400);

      --spinner-border-color: var(--clr-success-500);
    }

    &.-danger {
      --background-color: var(--clr-danger-100);
      --background-color-on-hover: var(--clr-danger-200);
      --border-color: var(--clr-danger-100);
      --border-color-on-hover: var(--clr-danger-200);
      --color: var(--clr-danger-600);
      --color-on-hover: var(--clr-danger-700);
      --spinner-border-color: var(--clr-danger-800);
    }

    &.-warning {
      --background-color: var(--clr-warning-100);
      --background-color-on-hover: var(--clr-warning-200);
      --border-color: var(--clr-warning-100);
      --border-color-on-hover: var(--clr-warning-200);
      --color: var(--clr-warning-700);
      --color-on-hover: var(--clr-warning-900);

      --spinner-border-color: var(--clr-warning-900);
    }

    &.-warning-outline {
      --background-color: color-mix(in oklab, var(--clr-warning-500), transparent 90%);
      --background-color-on-hover: color-mix(in oklab, var(--clr-warning-500), transparent 85%);
      --border-color: color-mix(in oklab, var(--clr-warning-500), transparent 60%);
      --border-color-on-hover: color-mix(in oklab, var(--clr-warning-500), transparent 50%);
      --color: var(--clr-warning-500);
      --color-on-hover: var(--clr-warning-500);

      --spinner-border-color: var(--clr-warning-600);
    }

    &.-info {
      --background-color: var(--clr-info-100);
      --background-color-on-hover: var(--clr-info-200);
      --border-color: var(--clr-info-100);
      --border-color-on-hover: var(--clr-info-200);
      --color: var(--clr-info-500);
      --color-on-hover: var(--clr-info-600);

      --spinner-border-color: var(--clr-info-800);
    }

    &.-info-500 {
      --background-color: var(--clr-info-500);
      --background-color-on-hover: var(--clr-info-600);
      --border-color: var(--clr-info-500);
      --border-color-on-hover: var(--clr-info-600);
      --color: var(--clr-info-50);
      --color-on-hover: var(--clr-info-100);

      --spinner-border-color: var(--clr-info-100);
    }

    &.-large {
      --gap: 1rem;
      --inline-size: 15rem;
      --min-inline-size: 15rem;
      --min-block-size: 3.125rem;
      --padding-block: 0.875rem;
      --padding-inline: 1rem;
      --border-radius: 0.625rem;
      --icon-font-size: 110%;
    }

    &.-small {
      --inline-size: 4.5rem;
      --min-inline-size: 4.5rem;
      --min-block-size: 2.125rem;
      --padding-block: 0.375rem;
      --padding-inline: 0.875rem;
      --border-radius: 0.375rem;
      --font-size: 0.875rem;
      --line-height: 1;

      & > i {
        line-height: 0.78 !important;
      }
    }

    &.-extra-small {
      --inline-size: 5.5rem;
      --min-inline-size: 5.5rem;
      --min-block-size: 2.25rem;
      --padding-block: 0.25rem;
      --padding-inline: 0.875rem;
      --border-radius: 0.375rem;
      --font-size: 0.8125rem;
      --line-height: 1.5;
      --icon-font-size: 115%;

      & > i {
        line-height: 0.78 !important;
      }
    }

    &.-min-content {
      inline-size: min-content;
    }

    &.-fluid {
      inline-size: 100%;
    }

    &.-max-content {
      min-inline-size: max-content;
      inline-size: max-content;
    }

    &.-uniform {
      inline-size: auto;
      min-inline-size: auto;
      /*padding: 0;*/
      aspect-ratio: 1 / 1;
    }

    &.-outline {
      --color: var(--border-color);
      --background-color: transparent;
    }

    &.-large-icon > i {
      font-size: 1.5rem;
      line-height: 0.5 !important;

      ::before {
        line-height: 0.5 !important;
      }
    }

    /* Behavior */

    &:disabled,
    .-disabled {
      --opacity: 0.62;

      pointer-events: none;
    }

    &.-loading {
      color: transparent !important;
      pointer-events: none;

      & > * {
        opacity: 0;
      }

      &::after {
        content: "";
        position: absolute;
        top: calc(50% - (var(--spinner-size) / 2));
        left: calc(50% - (var(--spinner-size) / 2));
        z-index: 1;
        inline-size: var(--spinner-size);
        block-size: var(--spinner-size);
        border: 0.125rem solid transparent;
        border-left-color: var(--spinner-border-color);
        border-top-color: var(--spinner-border-color);
        border-radius: 50%;
        animation: spin var(--spinner-speed) infinite linear;
      }
    }
  }

  .dialog {
    --min-inline-size: 20rem;
    --inline-size: fit-content;
    --block-size: max-content;
    --padding: 0;
    --color: var(--clr-text);
    --background-color: var(--clr-neutral-0);
    --border-radius: 0.625rem;
    --box-shadow-offset-x: 0;
    --box-shadow-offset-y: 0;
    --box-shadow-blur-radius: 2rem;
    --box-shadow-spread-radius: 1rem;
    --box-shadow-color: color-mix(in oklab, var(--clr-neutral-1000), transparent 91%);

    z-index: 999;
    /*min-inline-size: var(--min-inline-size);*/
    /*inline-size: calc(100% - 2rem);*/
    /*max-inline-size: 100%;*/
    /*max-block-size: calc(100dvh - 2rem);*/
    margin: auto;
    padding: var(--padding);
    background-color: var(--background-color);
    border-radius: 0.625rem;
    border: none;
    box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color);
    color: var(--color);

    @media screen and (min-width: 38rem) {
      /*min-inline-size: 28rem;*/
      /*inline-size: var(--inline-size);*/
      max-inline-size: calc(100% - 1rem);
      /*block-size: var(--block-size);*/
      max-block-size: calc(100dvh - 1rem);
      border-radius: var(--border-radius);
    }

    &[open],
    &[open]::backdrop {
      overflow-x: visible;
      animation: fade-in 200ms forwards;
    }

    &[closing],
    &[closing]::backdrop {
      animation: fade-out 200ms forwards;
    }

    &::backdrop {
      background-color: color-mix(in oklab, var(--clr-neutral-950), transparent 62%);
      backdrop-filter: blur(0.125rem);
    }

    .modal {
      --gap: 0;
      --padding-inline: 1.25rem;
      --padding-block: 1.25rem;

      --header-padding: var(--padding-block) var(--padding-inline);
      --header-color: inherit;

      --close-btn-size: clamp(2rem, 3cqi, 3rem);
      --close-btn-background-color: var(--clr-neutral-100);
      --close-btn-color: var(--clr-accent-300);

      position: relative;
      /*min-block-size: 100%;*/
      /*block-size: 100%;*/
      /*max-block-size: 100%;*/
      overflow-y: auto;

      @media screen and (min-width: 38rem) {
        min-block-size: 8rem;
      }

      &:not(:has(.modal-header)) {
        padding-block-start: var(--padding-block);
      }

      &:not(:has(.modal-footer)) {
        padding-block-end: var(--padding-block);
      }

      .modal-frame {
        &:has(.modal-loader) {
          display: grid;
          place-items: center;
        }
      }

      .modal-header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0.625rem;
        inline-size: calc(100% - 1.75 * var(--padding-inline));
        padding: var(--header-padding);
        color: var(--header-color, inherit);
        font-variation-settings: "wght" 438;
        line-height: 1.375;

        & > i {
          line-height: 1;
        }
      }

      .modal-close-button {
        position: absolute;
        inset-block-start: var(--padding-block);
        inset-inline-end: var(--padding-inline);
        z-index: 5;
        display: grid;
        place-items: center;
        inline-size: 1.5rem;
        aspect-ratio: 1 / 1;
        background-color: var(--clr-danger-100);
        border-radius: 0.375rem;
        font-size: 0.875rem;
        color: var(--clr-danger-500);
        animation: fade-in .75s forwards ease-out;
        transition: background-color .5s ease, color 300ms ease;

        & > i {
          transition: rotate 250ms ease-in-out;
        }

        &:hover {
          --close-btn-background-color: var(--clr-danger-200);
          --close-btn-color: var(--clr-danger-600);

          & > i {
            rotate: 90deg;
          }
        }
      }

      .modal:has(.modal-frame) .modal-close-button {
        display: none;
      }

      .modal:not(:has(.modal-loader)) .modal-close-button {
        display: grid;
        opacity: 0;
      }

      .modal-main {
        min-block-size: 4.25rem;

        &.\+padding {
          padding-inline: var(--padding-inline);
        }

        &.-animated {
          animation: fade-in .125s forwards ease-in;
        }
      }

      .modal-loader {
        display: grid;
        place-items: center;
        min-block-size: 5rem;
        color: var(--clr-brand-500);
        opacity: 0.8;
        animation: fade-in 0.375s forwards;
      }

      .modal-footer {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
        padding: calc(var(--padding-block) / 1.5) var(--padding-inline);
        margin-block: var(--padding-block) 0;
        background-color: var(--clr-neutral-100);
        border-radius: 0.375rem;

        &:has(.modal-help) {
          justify-content: space-between;
        }
      }

      .modal-help {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9375rem;
        font-variation-settings: "wght" 462;
      }

      .modal-actions {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.875rem;
      }
    }
  }

  .drawer {
    --min-inline-size: 19rem;
    --max-inline-size: 99rem;

    position: fixed;
    inset-block-start: 0;
    z-index: 10;
    inline-size: min(85%, var(--max-inline-size));
    min-inline-size: var(--min-inline-size);
    block-size: 100dvh;
    max-block-size: 100dvh;
    overflow-y: auto;
    transition: inset-inline-end 300ms ease, inset-inline-start 300ms ease;

    &,
    &.-drawer-inline-start {
      inset-inline-start: -100%;

      &.-drawer-open {
        inset-inline-start: 0;
      }
    }

    &.-drawer-inline-end {
      inset-inline-start: unset;
      inset-inline-end: -100%;

      &.-drawer-open {
        inset-inline-start: unset;
        inset-inline-end: 0;
      }
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: transparent;
      box-shadow: 0 0.375rem 1rem color-mix(in oklab, var(--clr-neutral-1000), transparent 91%);
    }

    &::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background-color: color-mix(in oklch, var(--clr-brand-950), transparent 80%);
      backdrop-filter: blur(0.15rem);
      opacity: 0;
      transition: all 150ms ease;
      pointer-events: none;
    }

    &::before,
    &::after {
      display: block;
    }

    &.-drawer-open::after {
      opacity: 1;
    }

    .drawer-header {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
    }

    .drawer-title {
      display: flex;
      flex-flow: row nowrap;
      gap: 0.75rem;
      align-items: center;
      font-variation-settings: "wght" 450;

      &,
      & > i,
      & > i::before {
        line-height: 1;
      }
    }

    .drawer-closer {
      display: grid;
      place-items: center;
      width: 1.5rem;
      aspect-ratio: 1 / 1;
      margin-inline-start: auto;
      background-color: color-mix(in oklab, var(--clr-danger-600), transparent 90%);
      border-radius: 0.375rem;
      color: var(--clr-danger-500);
      transition: rotate 250ms ease-in-out;

      &:is(:focus, :focus-within, :hover) {
        rotate: 90deg;
      }

      & > i {
        line-height: 0;
      }
    }
  }

  .dropdown {
    position: relative;
    inline-size: max-content;

    &.-fluid {
      inline-size: 100%;
    }

    & .dropdown-dots {
      --color: var(--clr-neutral-600);
      --background-color: transparent;
      --background-color-on-hover: var(--clr-neutral-200);

      display: grid;
      place-items: center;
      inline-size: 1.5rem;
      aspect-ratio: 1/1;
      background-color: var(--background-color);
      border-radius: 0.25rem;
      color: var(--color);

      &:is(:focus,:focus-within,:hover) {
        background-color: var(--background-color-on-hover);
      }

      &,
      & > i {
        line-height: 1.25;
      }

      &.-intensify {
        --background-color-on-hover: var(--clr-neutral-300);
      }

      &.-brand {
        --color: var(--clr-brand-600);
        --background-color-on-hover: var(--clr-brand-100);
      }
    }

    & .dropdown-dialog {
      position: absolute;
      inset-inline-start: 0;
      z-index: 10;
      display: flex;
      flex-flow: column nowrap;
      min-inline-size: 6rem;
      margin: .625rem 0 0;
      padding: 0.625rem 1.25rem;
      background-color: var(--clr-neutral-25);
      backdrop-filter: blur(0.2rem);
      border-radius: 0.625rem;
      box-shadow: 0 0.375rem 1rem color-mix(in oklab, var(--clr-neutral-1000), transparent 85%);
      transition-property: opacity, box-shadow, transform;
      transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      transition-duration: .15s;
      transform-origin: top left;
      text-align: left;

      &.-align-to-end {
        inset-inline-start: unset;
        inset-inline-end: 0;
        transform-origin: top right;
      }

      &.-fluid {
        inline-size: 100%;
      }

      &.-enter-from,
      &.-leave-to {
        opacity: 0;
        transform: scaleX(0.95) scaleY(0.95);
      }

      &.-enter-to,
      &.-leave-from {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
      }
    }

    & .dropdown-menu {
      inline-size: calc(100% + (2 * 0.75rem));
      padding: 0;
      margin: 0;
      margin-inline: -0.75rem;
      list-style: none;

      & .menu-item,
      & .menu-group {
        padding-inline: 0.75rem;
        color: var(--clr-accent-950);

        &:not(:first-child) {
          margin-block-start: 0.5rem;
          padding-block-start: 0.5rem;
          border-top: 0.0625rem solid var(--clr-neutral-200);
        }

        /*&--only-mobile {*/
        /*  @include display.none-for-tablet-landscape-up;*/
        /*}*/

        /*&--only-desktop {*/
        /*  @include display.block-for-tablet-landscape-up;*/
        /*}*/
      }

      & .menu-label {
        display: block;
        padding: 0.375rem 0;
        color: var(--clr-brand-600);
        font-size: 80%;
        font-variation-settings: "wght" 500;
        text-transform: uppercase;
      }

      & .menu-links {
        display: flex;
        flex-flow: column nowrap;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      & .menu-link {
        --background-color-on-hover: var(--clr-brand-400);
        --border-color-on-hover: var(--clr-brand-400);
        --color: var(--clr-accent-700);
        --color-on-hover: var(--clr-brand-600);

        display: flex;
        flex-flow: row nowrap;
        gap: 0.5rem;
        align-items: center;
        min-block-size: 2.25rem;
        min-inline-size: calc(100% + (2 * 0.5rem));
        padding-inline: 0.5rem;
        margin-inline: -0.5rem;
        background: transparent;
        border: transparent 0.0625rem solid;
        border-radius: 0.5rem;
        color: var(--color);
        font-size: 0.875rem;
        font-variation-settings: "wght" 450;
        line-height: 1;
        text-transform: none;
        transition: background-color 200ms ease, border-color 200ms ease, color 150ms ease;
        white-space: nowrap;

        & > i {
          font-size: 105%;

          &::before {
            line-height: 2;
          }
        }

        &:is(:hover) {
          background-color: color-mix(in oklch, var(--background-color-on-hover), transparent 90%);
          border-color: var(--border-color-on-hover);
          color: var(--color-on-hover);
        }

        &.-stronger {
          font-variation-settings: "wght" 462;
        }

        &.-danger {
          --background-color-on-hover: var(--clr-danger-400);
          --border-color-on-hover: var(--clr-danger-300);
          --color: var(--clr-danger-600);
          --color-on-hover: var(--clr-danger-600);
        }

        &.-info {
          --background-color-on-hover: var(--clr-info-400);
          --border-color-on-hover: var(--clr-info-300);
          --color: var(--clr-info-600);
          --color-on-hover: var(--clr-info-600);
        }

        &.-warning {
          --background-color-on-hover: var(--clr-warning-400);
          --border-color-on-hover: var(--clr-warning-300);
          --color: var(--clr-warning-600);
          --color-on-hover: var(--clr-warning-600);
        }

        &.-success {
          --background-color-on-hover: var(--clr-success-500);
          --border-color-on-hover: var(--clr-success-500);
          --color: var(--clr-success-700);
          --color-on-hover: var(--clr-success-800);
        }
      }
    }
  }

  .area,
  .prompt {
    container-type: inline-size;
    margin-inline: auto;
    display: flex;
    flex-flow: column nowrap;
    gap: 2.5rem;
  }

  .area {
    inline-size: min(100%, 62rem);

    .area-header {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      gap: 0.625rem 1rem;

      @container (min-width: 28rem) {
        grid-template-columns: 1fr max-content;
      }
    }

    .area-actions {
      inline-size: 100%;
      display: flex;
      flex-flow: row nowrap;
      gap: 0.625rem;

      @container (min-width: 28rem) {
        inline-size: max-content;
      }
    }

    .area-main {
      display: flex;
      flex-flow: column nowrap;
      gap: 2rem;
    }
  }

  .prompt {
    inline-size: min(100%, 48rem);
    block-size: 100%;
    justify-content: center;

    .prompt-header,
    .prompt-actions,
    .prompt-footer {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .prompt-header {
      flex-flow: column nowrap;

      @container (min-width: 28rem) {
        grid-template-columns: 1fr max-content;
      }
    }

    .prompt-actions {
      inline-size: 100%;

      @container (min-width: 28rem) {
        inline-size: max-content;
      }
    }
  }

  .form {
    display: flex;
    flex-flow: column nowrap;

    & :not(button)[disabled],
    & :not(button).-disabled {
      pointer-events: none;
      background-color: var(--clr-neutral-50);
      color: var(--clr-neutral-400)
    }

    & .form-body {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.875rem;

      &.-flexible {
        flex-flow: row wrap;

        & > .form-row {
          flex: 1 1 13rem;
        }
      }
    }

    & .form-field {
      --gap: 0.625rem;

      display: flex;
      flex-flow: column nowrap;
      gap: var(--gap);
    }

    & .form-row {
      --gap: 0.125rem;
      --min-inline-size: 13rem;
      --color: var(--clr-text);

      flex: 1 1 auto;
      display: flex;
      flex-flow: column nowrap;
      gap: var(--gap);
      min-inline-size: var(--min-inline-size);
      color: var(--color);


      &:has(.form-choice-list) {
        gap: 0.25rem;
      }

      & > label {
        margin-inline-start: 0.375rem;
        font-size: 0.875rem;
        font-variation-settings: "wght" 550;
        line-height: 1.4375;

        & > small {
          opacity: 0.8;
        }
      }
    }

    & .form-widget {
      --inline-size: 100%;
      --block-size: 2.625rem;
      --padding: 0 0.625rem;
      --gap: 0.625rem;
      --background-color: var(--clr-neutral-0);
      --border-width: 0.125rem;
      --border-color: var(--clr-neutral-300);
      --border-color-on-focus: color-mix(in oklab, var(--clr-brand-600), transparent 55%);
      --border-radius: 0.375rem;
      --box-shadow: none;
      --color: var(--clr-text);
      --font-size: 0.9375rem;
      --icon-color: var(--clr-neutral-300);
      --placeholder-color: var(--clr-neutral-400);
      --placeholder-opacity: 1;

      display: flex;
      flex-flow: row nowrap;
      gap: var(--gap);
      align-items: center;
      inline-size: var(--inline-size);
      block-size: var(--block-size);
      padding: var(--padding);
      background-color: var(--background-color);
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      color: var(--color);
      font-size: var(--font-size);
      transition: border-color 0.25s ease-in-out;

      & ::placeholder {
        color: var(--placeholder-color);
        opacity: var(--placeholder-opacity);
        font-size: 0.9375rem;
        font-variation-settings: "wght" 400;
      }

      &:is(:focus, :focus-within) {
        border-color: var(--border-color-on-focus);
      }

      & > i {
        color: var(--icon-color);
      }

      &:has(textarea) {
        block-size: auto;
      }

      &:has(input[type="hidden"]) {
        display: none;
      }
    }

    & .form-control {
      --padding: 0.375rem 0;
      --font-weight: 385;

      inline-size: 100%;
      block-size: 100%;
      padding: var(--padding);
      background: transparent;
      border: none;
      box-shadow: none;
      /* Hack: https://noahliebman.net/2024/08/beating-important-user-agent-styles/ */
      transition: color calc(infinity * 1s) step-end, background-color calc(infinity * 1s) step-end;
      font-variation-settings: "wght" var(--font-weight);


      &:placeholder-shown {
        font-variation-settings: "wght" var(--font-weight);
      }
    }

    & .form-password-visibility {
      position: relative;

      & button {
        color: var(--clr-neutral-500);
        font-size: 0.8175rem;
      }
    }

    & .form-errors {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.125rem;
    }

    & .form-error,
    & .form-help {
      display: inline-flex;
      flex-flow: row nowrap;
      gap: 0.375rem;
      font-size: 0.8175rem;
      line-height: 2.625ex;
    }

    & .form-error {
      color: var(--clr-danger-500);
    }

    & .form-help {
      margin-block-start: 0.375rem;
      color: var(--clr-info-500);
    }

    & .form-aside,
    & .form-rest {
      display: none;
    }

    & .form-horizontal-rule {
      --background-color: var(--clr-brand-100);
      --margin-inline: auto;

      background-color: var(--background-color);
      margin-inline: var(--margin-inline);
    }

    & .form-footer {
      --justify-content: flex-start;
      --margin-block-start: 1.25rem;

      display: flex;
      flex-flow: row wrap;
      gap: 0.75rem;
      inline-size: 100%;
      justify-content: var(--justify-content);
      margin-block-start: var(--margin-block-start);

      &.-center {
        --justify-content: center;
      }
    }
  }

  .link {
    --color: var(--clr-info-500);
    --color-on-hover: var(--clr-info-600);
    --font-size: 0.875rem;
    --font-weight: 600;

    display: inline-flex;
    flex-flow: row nowrap;
    gap: 0.875ex;
    align-items: center;
    color: var(--color);
    font-size: var(--font-size);
    font-variation-settings: "wght" var(--font-weight);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.1s ease-in-out;

    &.-large {
      --font-size: 0.9375rem;
    }

    &.-normal {
      --font-weight: 475;
    }

    &.-small {
      --font-size: 0.8125rem;
      --font-weight: 475;
    }

    &.-extra-small {
      --font-size: 0.75rem;
      --font-weight: 450;
    }

    &.-auto-underline:is(:focus, :focus-within, :hover) {
      text-decoration: underline;
    }

    &.-underlined {
      text-decoration: underline;
    }

    &.-brand-200 {
      --color: var(--clr-brand-300);
      --color-on-hover: var(--clr-brand-200);
    }

    &.-success {
      --color: var(--clr-success-700);
      --color-on-hover: var(--clr-success-800);
    }

    &.-warning {
      --color: var(--clr-warning-600);
      --color-on-hover: var(--clr-warning-700);
    }

    &.-danger {
      --color: var(--clr-danger-500);
      --color-on-hover: var(--clr-danger-600);

      & > * {
        color: inherit;
      }
    }

    &:is(:focus, :focus-within, :hover) {
      --color: var(--color-on-hover);
    }
  }

  .logo {
    display: block;
    inline-size: min(100%, 8.875rem);

    & > svg {
      inline-size: 100%;
    }

    .logo-text,
    .logo-pictogram {
      vector-effect: non-scaling-stroke;
    }

    .logo-text {
      fill: var(--clr-accent-50);
    }

    .logo-pictogram {
      fill: var(--clr-accent-950);
    }
  }

  .notifications,
  .avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 2rem;
  }

  .main-menu {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.875rem;

    .main-menu-space {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.375rem;
      color: var(--clr-accent-400);
      font-size: 0.875rem;
      font-variation-settings: "wght" 500;
      letter-spacing: 0.0125rem;
      text-transform: uppercase;
      opacity: 0.75;
    }

    .main-menu-item,
    .main-menu-group,
    .main-menu-group-item {
      inline-size: calc(100% + 1.75rem);
      margin-inline: -0.875rem;
      font-size: 1rem;
      font-variation-settings: "wght" 425;
      text-transform: none;

      &:not(:first-child) {
        margin-block-start: 0.25rem;
      }
    }

    .main-menu-group-list {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.5s ease-in-out;

      &:has(.-active),
      &.-open {
        grid-template-rows: 1fr;
      }
    }

    .main-menu-group-items {
      position: relative;
      margin-inline-start: 0.875rem;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        inset: 0 1.5rem 0 0.4375rem;
        z-index: 1;
        block-size: calc(100% + 0.25rem);
        inline-size: 0.0625rem;
        background-color: var(--clr-accent-800);
      }
    }

    .main-menu-link,
    .main-menu-group-button {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 0.5625rem;
      inline-size: 100%;
      padding: 0.75rem 0.875rem;
      border-radius: 0.4375rem;
      outline: none;
      color: var(--clr-accent-200);
      line-height: 1;
      letter-spacing: 0.01rem;
      transition: background-color 0.2s ease, color 0.2s ease;

      & > i {
        color: inherit;
      }

      &.-active,
      &:hover {
        background-color: color-mix(in oklab, var(--clr-brand-400), transparent 93%);
        color: var(--clr-brand-400);
      }

      & :nth-child(2) {
        margin-inline-start: auto;
      }
    }

    .main-menu-group-item {
      inline-size: calc(100% - 1.0625rem);
      margin-inline: 1.0625rem 0;
      font-size: 0.875rem;
      font-variation-settings: "wght" 400;
      overflow: hidden;

      &.-detached {
        margin-block-start: 0.375rem;
        padding-block-start: 0.375rem;
        border-block-start: 0.0625rem solid var(--clr-accent-900);
        font-variation-settings: "wght" 465;

        & > a {
          gap: 0.375rem;
        }

        & > i {
          color: inherit;
        }
      }
    }
  }

  .user-button {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
    color: var(--clr-text);
    align-items: center;
    font-size: 0.875rem;
    font-variation-settings: "wght" 475;
    line-height: 1;

    & a {
      color: inherit;
    }

    .user-button-name {
      display: none;
      white-space: nowrap;

      @media screen and (min-width: 48rem) {
        display: block;
      }
    }

    .user-button-avatar {
      display: grid;
      place-items: center;
      inline-size: 1.8125rem;
      aspect-ratio: 1 / 1;
      border-radius: 2rem;
      background-color: var(--clr-brand-100);
      color: var(--clr-brand-700);
      font-size: 0.875rem;
      font-variation-settings: "wght" 600;
      line-height: 0;
    }
  }

  .notifications {
    position: relative;
    color: var(--clr-accent-300);
    transition: background-color 0.2ms ease, color 0.2ms ease;

    &:is(:focus,:focus-within,:hover) {
      background-color: var(--clr-brand-600);
      color: var(--clr-brand-100);
    }

    & > i,
    & > i::before {
      line-height: 1;
    }

    & > .notification-indicator {
      position: absolute;
      top: 0.375rem;
      right: 0.225rem;
      width: 0.375rem;
      aspect-ratio: 1 / 1;
      background-color: var(--clr-danger-400);
      border-radius: 0.375rem;
    }
  }

  .avatar {
    background-color: var(--clr-brand-100);
    color: var(--clr-brand-700);
    font-size: 0.875rem;
    font-variation-settings: "wght" 500;
    line-height: 1;
  }

  .badge,
  .stamp {
    --background-color: var(--clr-neutral-100);
    --color: var(--clr-accent-600);

    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    inline-size: max-content;
    background-color: var(--background-color);
    color: var(--color);

    &.-info {
      --background-color: var(--clr-info-50);
      --color: var(--clr-info-600);
    }

    &.-warning {
      --background-color: var(--clr-warning-50);
      --color: var(--clr-warning-600);
    }

    &.-danger {
      --background-color: var(--clr-danger-50);
      --color: var(--clr-danger-600);
    }

    &.-success {
      --background-color: var(--clr-success-50);
      --color: var(--clr-success-700);
    }
  }

  .badge {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    inline-size: max-content;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-variation-settings: "wght" 462;
    line-height: 1;

    &.-large {
      padding: 0.625rem 1rem;
      border-radius: 0.5rem;
      font-size: 1rem;
      font-variation-settings: "wght" 562;
    }

    &.-uppercase {
      text-transform: uppercase;
    }
  }

  .stamp {
    flex-flow: column nowrap;
    min-inline-size: 4.5rem;
    padding: 0.5rem;
    background-color: var(--background-color);
    color: var(--color);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-variation-settings: "wght" 462;
    line-height: 1;
  }
}