Curious learner: What's the reason for the multiple input focus styles?

Asking this because I'm curious and slightly out of my depth with my css-fu. And because hopefully it may help future others and serve as documentation for the thinking behind some of the detail of Roux's boilerplate!

In _forms.css Roux styles the focus state of form inputs in 2 places (code snippets abbreviated below):

:is(input) {
  &:focus {
    outline: var(--border-width--base) solid var(--color--primary-base);
  }
}

:where(input:not([type])) {
  &:focus-visible {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: 2px;
  }
}

Some questions from ignorance:

• What is the intention with setting this in both the :is and :where blocks?
• Why &:focus vs &:focus-visible?
• I see the :where block with :&:focus-visible has --border-width--thick but I can't seem to see this in the app when I focus on an input
• If I want to update the default behaviour for input focus which should I use?

Start with _forms.css and compare the two input focus blocks named in the issue. Verify their behavior in the app, then document the intent of each selector, the difference between :focus and :focus-visible, and which block controls default input focus styling.