/* SPDX-FileCopyrightText: 2026 André Menhard */
/* SPDX-License-Identifier: LicenseRef-OmniShare-Proprietary */

/*
 * Input focus is owned here. Every system keeps a complete stationary focus
 * boundary, derives semantic color from the field that owns it, and gives
 * motion to one generated overlay only.
 */

/* ------------------------------------------------------------------------- */
/* System 1: ribbon current                                                  */
/* ------------------------------------------------------------------------- */

html[data-auth-focus-treatment="precision-keyline"] {
  --auth-current-anchor:
    color-mix(in srgb, var(--auth-ink) 70%, var(--auth-accent));
  --auth-current-accent:
    color-mix(in srgb, var(--auth-accent) 90%, var(--auth-ink));
  --auth-current-secondary:
    color-mix(in srgb, var(--auth-secondary) 90%, var(--auth-ink));
  --auth-current-glint:
    color-mix(in srgb, var(--auth-accent) 48%, var(--auth-secondary));
  --auth-current-spark:
    color-mix(in srgb, var(--auth-accent) 70%, var(--auth-paper));
  --auth-current-base:
    color-mix(in srgb, var(--auth-current-anchor) 90%, var(--auth-ink));
}

html[data-auth-focus-treatment="precision-keyline"] .auth-field.is-invalid {
  --auth-current-anchor:
    color-mix(in srgb, var(--auth-danger) 72%, var(--auth-ink));
  --auth-current-accent: var(--auth-danger);
  --auth-current-secondary:
    color-mix(in srgb, var(--auth-danger) 82%, var(--auth-paper));
  --auth-current-glint:
    color-mix(in srgb, var(--auth-danger) 90%, var(--auth-paper));
  --auth-current-spark:
    color-mix(in srgb, var(--auth-danger) 76%, var(--auth-paper));
  --auth-current-base:
    color-mix(in srgb, var(--auth-danger) 72%, var(--auth-ink));
}

html[data-auth-focus-treatment="precision-keyline"] .auth-field.is-warning {
  --auth-current-anchor:
    color-mix(in srgb, var(--auth-warning) 74%, var(--auth-ink));
  --auth-current-accent: var(--auth-warning);
  --auth-current-secondary:
    color-mix(in srgb, var(--auth-warning) 84%, var(--auth-paper));
  --auth-current-glint:
    color-mix(in srgb, var(--auth-warning) 92%, var(--auth-paper));
  --auth-current-spark:
    color-mix(in srgb, var(--auth-warning) 78%, var(--auth-paper));
  --auth-current-base:
    color-mix(in srgb, var(--auth-warning) 74%, var(--auth-ink));
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field:has(input:read-only),
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-field.is-expired {
  --auth-current-anchor:
    color-mix(in srgb, var(--auth-ink-soft) 76%, var(--auth-ink));
  --auth-current-accent:
    color-mix(in srgb, var(--auth-ink-soft) 86%, var(--auth-ink));
  --auth-current-secondary:
    color-mix(in srgb, var(--auth-ink-soft) 84%, var(--auth-paper));
  --auth-current-glint:
    color-mix(in srgb, var(--auth-ink-soft) 90%, var(--auth-paper));
  --auth-current-spark:
    color-mix(in srgb, var(--auth-ink-soft) 76%, var(--auth-paper));
  --auth-current-base:
    color-mix(in srgb, var(--auth-ink-soft) 76%, var(--auth-ink));
}

.auth-current-loop {
  position: absolute;
  z-index: 6;
  inset: -1px;
  display: none;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  stroke-dashoffset: 0;
}

html[data-auth-focus-treatment="precision-keyline"] .auth-current-loop {
  display: block;
}

html[data-auth-focus-treatment="precision-keyline"] .auth-field__control,
html[data-auth-focus-treatment="precision-keyline"] .auth-code-cells {
  --auth-current-loop-radius: var(--auth-control-radius);
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-corners="round"]
  .auth-field__control {
  --auth-current-loop-radius:
    calc((var(--auth-control-height) + 2px) / 2);
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-corners="round"]
  .auth-code-cells {
  --auth-current-loop-radius: 32px;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control {
  --auth-current-loop-radius: 0px;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control
  > .auth-current-loop {
  inset: 0 0 -1px;
  width: 100%;
  height: calc(100% + 1px);
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-entry[data-code-treatment="ledger"]
  .auth-code-cells {
  --auth-current-loop-radius: 8px;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-entry[data-code-treatment="ledger"]
  .auth-code-cells
  > .auth-current-loop {
  inset: 0;
  width: 100%;
  height: 100%;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-current-loop rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: max(0px, calc(var(--auth-current-loop-radius) - 1px));
  ry: max(0px, calc(var(--auth-current-loop-radius) - 1px));
  fill: none;
  vector-effect: non-scaling-stroke;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-current-loop__segment {
  stroke-width: 2px;
  stroke-linecap: butt;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control::before,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cells::before {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 2px;
  background: var(--auth-current-base);
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: none !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::before {
  opacity: 1;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control::after,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cells::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  background:
    linear-gradient(
        90deg,
        transparent 1%,
        var(--auth-current-accent) 15%,
        var(--auth-current-glint) 32%,
        var(--auth-current-secondary) 47%,
        transparent 63%
      )
      left top / 100% 2px no-repeat,
    linear-gradient(
        180deg,
        var(--auth-current-secondary) 0%,
        transparent 52%
      )
      right top / 2px 100% no-repeat,
    linear-gradient(
        90deg,
        transparent 35%,
        var(--auth-current-secondary) 51%,
        var(--auth-current-glint) 68%,
        var(--auth-current-accent) 84%,
        transparent 99%
      )
      left bottom / 100% 2px no-repeat,
    linear-gradient(
        0deg,
        var(--auth-current-accent) 0%,
        transparent 46%
      )
      left bottom / 2px 100% no-repeat;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: none !important;
  -webkit-mask: none;
  mask: none;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  opacity: 1;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-field.is-invalid
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-field.is-warning
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control:has(input:read-only):focus-within {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-control:has(input:read-only):focus-within
  .auth-code-cells {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after {
  transform: none;
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field:not(.auth-code-field).is-invalid
  input:focus:not(:read-only) {
  caret-color: var(--auth-danger);
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field:not(.auth-code-field).is-warning
  input:focus:not(:read-only) {
  caret-color: var(--auth-warning);
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-control:not(:has(input:read-only, input:disabled)):focus-within
  .auth-code-cell.is-active::before,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-control:not(:has(input:read-only, input:disabled)):focus-within
  .auth-code-cell.has-caret::after {
  background: var(--auth-current-accent);
}

html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control::before,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-field__control::after,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cells,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cells::before,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cells::after,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cell,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-cell::before,
html[data-auth-focus-treatment="precision-keyline"]
  .auth-code-selection {
  transition: none !important;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-glints"]
  .auth-field__control::after,
html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-glints"]
  .auth-code-cells::after {
  background:
    linear-gradient(
        90deg,
        transparent 11%,
        var(--auth-current-accent) 18%,
        var(--auth-current-glint) 23%,
        var(--auth-current-secondary) 29%,
        transparent 37% 62%,
        var(--auth-current-secondary) 70%,
        var(--auth-current-glint) 76%,
        var(--auth-current-accent) 82%,
        transparent 90%
      )
      left top / 100% 2px no-repeat,
    linear-gradient(180deg, transparent, transparent)
      right top / 2px 100% no-repeat,
    linear-gradient(
        90deg,
        transparent 24%,
        var(--auth-current-secondary) 32%,
        var(--auth-current-glint) 38%,
        var(--auth-current-accent) 44%,
        transparent 52% 74%,
        var(--auth-current-accent) 82%,
        var(--auth-current-glint) 87%,
        transparent 95%
      )
      left bottom / 100% 2px no-repeat,
    linear-gradient(0deg, transparent, transparent)
      left bottom / 2px 100% no-repeat;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-ribbon"]
  .auth-field__control::after,
html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-ribbon"]
  .auth-code-cells::after {
  background:
    linear-gradient(
        90deg,
        transparent 0%,
        var(--auth-current-accent) 10%,
        var(--auth-current-glint) 38%,
        var(--auth-current-secondary) 66%,
        var(--auth-current-accent) 86%,
        transparent 100%
      )
      left top / 100% 2px no-repeat,
    linear-gradient(
        180deg,
        var(--auth-current-accent) 0%,
        var(--auth-current-secondary) 42%,
        transparent 88%
      )
      right top / 2px 100% no-repeat,
    linear-gradient(
        90deg,
        transparent 36%,
        var(--auth-current-secondary) 57%,
        var(--auth-current-accent) 82%,
        transparent 100%
      )
      left bottom / 100% 2px no-repeat,
    linear-gradient(0deg, transparent, transparent)
      left bottom / 2px 100% no-repeat;
}

@keyframes auth-current-orbit {
  from {
    background-position:
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%;
  }

  to {
    background-position:
      100% 0%,
      100% 100%,
      0% 100%,
      0% 0%;
  }
}

@keyframes auth-current-arrive {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%;
    filter: saturate(0.72) brightness(0.86);
    opacity: 0.42;
  }

  58% {
    filter: saturate(1.12) brightness(1.08);
    opacity: 1;
  }

  100% {
    background-position:
      100% 0%,
      100% 100%,
      0% 100%,
      0% 0%;
    filter: none;
    opacity: 1;
  }
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-orbit"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after,
html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-orbit"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  background:
    linear-gradient(
        90deg,
        transparent 0% 31%,
        var(--auth-current-accent) 40%,
        var(--auth-current-glint) 50%,
        var(--auth-current-secondary) 60%,
        transparent 69% 100%
      )
      left top / 220% 2px no-repeat,
    linear-gradient(
        180deg,
        transparent 0% 31%,
        var(--auth-current-secondary) 40%,
        var(--auth-current-glint) 50%,
        var(--auth-current-accent) 60%,
        transparent 69% 100%
      )
      right top / 2px 220% no-repeat,
    linear-gradient(
        270deg,
        transparent 0% 31%,
        var(--auth-current-accent) 40%,
        var(--auth-current-glint) 50%,
        var(--auth-current-secondary) 60%,
        transparent 69% 100%
      )
      right bottom / 220% 2px no-repeat,
    linear-gradient(
        0deg,
        transparent 0% 31%,
        var(--auth-current-secondary) 40%,
        var(--auth-current-glint) 50%,
        var(--auth-current-accent) 60%,
        transparent 69% 100%
      )
      left bottom / 2px 220% no-repeat;
  animation: auth-current-orbit 3600ms linear infinite;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-twin"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after,
html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-twin"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  opacity: 0;
  animation: none;
}

@keyframes auth-current-twin-loop {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -25;
  }
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-twin"]
  .auth-field__control:not(:has(input:disabled)):focus-within
  > .auth-current-loop,
html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-twin"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells
  > .auth-current-loop {
  opacity: 1;
  animation: auth-current-twin-loop 4200ms linear infinite;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-arrival"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after,
html[data-auth-focus-treatment="precision-keyline"][data-auth-focus-motion="current-arrival"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  background:
    linear-gradient(
        90deg,
        transparent 0% 26%,
        var(--auth-current-accent) 37%,
        var(--auth-current-glint) 49%,
        var(--auth-current-secondary) 61%,
        transparent 72% 100%
      )
      left top / 180% 2px no-repeat,
    linear-gradient(
        180deg,
        transparent 0% 26%,
        var(--auth-current-secondary) 37%,
        var(--auth-current-glint) 49%,
        var(--auth-current-accent) 61%,
        transparent 72% 100%
      )
      right top / 2px 180% no-repeat,
    linear-gradient(
        270deg,
        transparent 0% 26%,
        var(--auth-current-accent) 37%,
        var(--auth-current-glint) 49%,
        var(--auth-current-secondary) 61%,
        transparent 72% 100%
      )
      right bottom / 180% 2px no-repeat,
    linear-gradient(
        0deg,
        transparent 0% 26%,
        var(--auth-current-secondary) 37%,
        var(--auth-current-glint) 49%,
        var(--auth-current-accent) 61%,
        transparent 72% 100%
      )
      left bottom / 2px 180% no-repeat;
  animation: auth-current-arrive 520ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control::before {
  z-index: 5 !important;
  inset: 0 !important;
  bottom: -1px !important;
  width: auto !important;
  height: auto !important;
  padding: 0;
  background:
    linear-gradient(var(--auth-current-base), var(--auth-current-base))
      left top / 100% 3px no-repeat,
    linear-gradient(var(--auth-current-base), var(--auth-current-base))
      right top / 3px 100% no-repeat,
    linear-gradient(var(--auth-current-base), var(--auth-current-base))
      right bottom / 100% 3px no-repeat,
    linear-gradient(var(--auth-current-base), var(--auth-current-base))
      left bottom / 3px 100% no-repeat;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  -webkit-mask: none;
  mask: none;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before {
  opacity: 1 !important;
}

html[data-auth-focus-treatment="precision-keyline"][data-auth-input="rail"]
  .auth-field__control::after {
  inset: 0 !important;
  bottom: -1px !important;
  width: auto !important;
  height: auto !important;
}

html[data-auth-motion="still"][data-auth-focus-treatment="precision-keyline"]
  .auth-field__control::after,
html[data-auth-motion="still"][data-auth-focus-treatment="precision-keyline"]
  .auth-code-cells::after {
  animation: none !important;
  filter: none;
}

html[data-auth-motion="still"][data-auth-focus-treatment="precision-keyline"]
  .auth-current-loop {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-auth-focus-treatment="precision-keyline"]
    .auth-field__control::after,
  html[data-auth-focus-treatment="precision-keyline"]
    .auth-code-cells::after {
    animation: none !important;
    filter: none;
  }

  html[data-auth-focus-treatment="precision-keyline"]
    .auth-current-loop {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------------- */
/* System 2: refractive lens                                                 */
/* ------------------------------------------------------------------------- */

html[data-auth-focus-treatment="capture-brackets"] {
  --auth-lens-frame:
    color-mix(in srgb, var(--auth-ink) 79%, var(--auth-accent));
  --auth-lens-a:
    color-mix(in srgb, var(--auth-accent) 88%, var(--auth-ink));
  --auth-lens-b:
    color-mix(in srgb, var(--auth-secondary) 86%, var(--auth-ink));
  --auth-lens-light:
    color-mix(in srgb, var(--auth-paper-strong) 88%, var(--auth-accent));
  --auth-lens-wash-a:
    color-mix(in srgb, var(--auth-accent) 26%, transparent);
  --auth-lens-wash-b:
    color-mix(in srgb, var(--auth-secondary) 22%, transparent);
}

html[data-auth-focus-treatment="capture-brackets"] .auth-field.is-invalid {
  --auth-lens-frame:
    color-mix(in srgb, var(--auth-danger) 76%, var(--auth-ink));
  --auth-lens-a: var(--auth-danger);
  --auth-lens-b:
    color-mix(in srgb, var(--auth-danger) 76%, var(--auth-paper));
  --auth-lens-light:
    color-mix(in srgb, var(--auth-danger) 34%, var(--auth-paper-strong));
  --auth-lens-wash-a:
    color-mix(in srgb, var(--auth-danger) 24%, transparent);
  --auth-lens-wash-b:
    color-mix(in srgb, var(--auth-danger) 17%, transparent);
}

html[data-auth-focus-treatment="capture-brackets"] .auth-field.is-warning {
  --auth-lens-frame:
    color-mix(in srgb, var(--auth-warning) 76%, var(--auth-ink));
  --auth-lens-a: var(--auth-warning);
  --auth-lens-b:
    color-mix(in srgb, var(--auth-warning) 74%, var(--auth-paper));
  --auth-lens-light:
    color-mix(in srgb, var(--auth-warning) 30%, var(--auth-paper-strong));
  --auth-lens-wash-a:
    color-mix(in srgb, var(--auth-warning) 23%, transparent);
  --auth-lens-wash-b:
    color-mix(in srgb, var(--auth-warning) 16%, transparent);
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field:has(input:read-only),
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-field.is-expired {
  --auth-lens-frame:
    color-mix(in srgb, var(--auth-ink-soft) 82%, var(--auth-ink));
  --auth-lens-a:
    color-mix(in srgb, var(--auth-ink-soft) 78%, var(--auth-line-strong));
  --auth-lens-b:
    color-mix(in srgb, var(--auth-ink-soft) 62%, var(--auth-paper));
  --auth-lens-light:
    color-mix(in srgb, var(--auth-paper-strong) 82%, var(--auth-ink-soft));
  --auth-lens-wash-a:
    color-mix(in srgb, var(--auth-ink-soft) 15%, transparent);
  --auth-lens-wash-b:
    color-mix(in srgb, var(--auth-line-strong) 12%, transparent);
}

html[data-auth-focus-treatment="capture-brackets"] .auth-field {
  --auth-lens-seam:
    linear-gradient(
      132deg,
      var(--auth-lens-frame) 0% 20%,
      var(--auth-lens-a) 38%,
      var(--auth-lens-light) 50%,
      var(--auth-lens-b) 65%,
      var(--auth-lens-frame) 84% 100%
    );
}

html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-quiet"]
  .auth-field {
  --auth-lens-seam:
    linear-gradient(
      180deg,
      var(--auth-lens-light) 0%,
      var(--auth-lens-a) 46%,
      var(--auth-lens-b) 100%
    );
}

html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-aurora"]
  .auth-field {
  --auth-lens-seam:
    linear-gradient(
      100deg,
      var(--auth-lens-a) 0%,
      var(--auth-lens-light) 24%,
      var(--auth-lens-frame) 48%,
      var(--auth-lens-b) 73%,
      var(--auth-lens-light) 100%
    );
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-cells::after {
  position: absolute;
  z-index: 5;
  inset: 2px;
  display: block;
  width: auto;
  height: auto;
  padding: 1px;
  background: var(--auth-lens-seam);
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: none !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  opacity: 1;
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="capture-brackets"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-field.is-invalid
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-field.is-warning
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control:has(input:read-only):focus-within,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-control:has(input:read-only):focus-within
  .auth-code-cells {
  border-color: var(--auth-lens-frame) !important;
  outline: 0;
  box-shadow:
    inset 0 0 0 1px var(--auth-lens-frame),
    inset 0 0 0 2px var(--auth-lens-light),
    inset 0 9px 16px -12px var(--auth-lens-wash-a),
    inset 0 -9px 16px -12px var(--auth-lens-wash-b) !important;
  transition: none !important;
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field:is(.is-invalid, .is-warning)
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  inset: 3px;
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field:is(.is-invalid, .is-warning)
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells {
  box-shadow:
    inset 0 0 0 2px var(--auth-lens-frame),
    inset 0 0 0 3px var(--auth-lens-light),
    inset 0 9px 16px -12px var(--auth-lens-wash-a),
    inset 0 -9px 16px -12px var(--auth-lens-wash-b) !important;
}

html[data-auth-focus-treatment="capture-brackets"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after {
  transform: scaleX(0);
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field:not(.auth-code-field).is-invalid
  input:focus:not(:read-only) {
  caret-color: var(--auth-danger);
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field:not(.auth-code-field).is-warning
  input:focus:not(:read-only) {
  caret-color: var(--auth-warning);
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-control:not(:has(input:read-only, input:disabled)):focus-within
  .auth-code-cell.is-active::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-control:not(:has(input:read-only, input:disabled)):focus-within
  .auth-code-cell.has-caret::after {
  background: var(--auth-lens-a);
}

html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-field__control::after,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-cells,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-cells::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-cells::after,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-cell,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-cell::before,
html[data-auth-focus-treatment="capture-brackets"]
  .auth-code-selection {
  transition: none !important;
}

@keyframes auth-lens-wave-loop {
  from {
    background-position:
      0% top,
      100% bottom;
  }

  to {
    background-position:
      100% top,
      0% bottom;
  }
}

@keyframes auth-lens-tide-loop {
  0%,
  100% {
    background-position:
      0% top,
      100% bottom;
  }

  50% {
    background-position:
      100% top,
      0% bottom;
  }
}

@keyframes auth-lens-settle {
  0% {
    opacity: 0.28;
    filter: brightness(1.28) saturate(1.22);
  }

  52% {
    opacity: 1;
    filter: brightness(1.1) saturate(1.1);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-counterwave"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-counterwave"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  padding: 0;
  background-color: transparent;
  background-image:
    linear-gradient(
      90deg,
      var(--auth-lens-frame) 0% 25%,
      var(--auth-lens-a) 37%,
      var(--auth-lens-light) 50%,
      var(--auth-lens-b) 63%,
      var(--auth-lens-frame) 75% 100%
    ),
    linear-gradient(
      90deg,
      var(--auth-lens-frame) 0% 25%,
      var(--auth-lens-b) 37%,
      var(--auth-lens-light) 50%,
      var(--auth-lens-a) 63%,
      var(--auth-lens-frame) 75% 100%
    );
  background-repeat:
    repeat-x,
    repeat-x;
  background-position:
    0% top,
    100% bottom;
  background-size:
    50% 1px,
    50% 1px;
  animation: auth-lens-wave-loop 3.6s linear infinite;
  -webkit-mask: none;
  mask: none;
}

html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-tide"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-tide"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  padding: 0;
  background-color: transparent;
  background-image:
    linear-gradient(
      90deg,
      transparent 0% 18%,
      var(--auth-lens-a) 34%,
      var(--auth-lens-light) 48%,
      var(--auth-lens-b) 62%,
      transparent 80% 100%
    ),
    linear-gradient(
      90deg,
      transparent 0% 18%,
      var(--auth-lens-b) 34%,
      var(--auth-lens-light) 48%,
      var(--auth-lens-a) 62%,
      transparent 80% 100%
    );
  background-repeat:
    no-repeat,
    no-repeat;
  background-position:
    0% top,
    100% bottom;
  background-size:
    180% 2px,
    180% 2px;
  animation: auth-lens-tide-loop 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  -webkit-mask: none;
  mask: none;
}

html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-settle"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="capture-brackets"][data-auth-focus-motion="lens-settle"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  animation: auth-lens-settle 380ms var(--auth-ease) both;
}

html[data-auth-motion="still"][data-auth-focus-treatment="capture-brackets"]
  .auth-field__control::before,
html[data-auth-motion="still"][data-auth-focus-treatment="capture-brackets"]
  .auth-code-cells::after {
  padding: 1px !important;
  background: var(--auth-lens-seam) !important;
  animation: none !important;
  filter: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-auth-focus-treatment="capture-brackets"]
    .auth-field__control::before,
  html[data-auth-focus-treatment="capture-brackets"]
    .auth-code-cells::after {
    padding: 1px !important;
    background: var(--auth-lens-seam) !important;
    animation: none !important;
    filter: none;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
  }
}

/* ------------------------------------------------------------------------- */
/* System 3: interior aurora                                                 */
/* ------------------------------------------------------------------------- */

html[data-auth-focus-treatment="datum-shelf"] {
  --auth-aurora-frame:
    color-mix(in srgb, var(--auth-ink) 78%, var(--auth-accent));
  --auth-aurora-a:
    color-mix(in srgb, var(--auth-accent) 24%, transparent);
  --auth-aurora-b:
    color-mix(in srgb, var(--auth-secondary) 20%, transparent);
  --auth-aurora-light:
    color-mix(in srgb, var(--auth-paper-strong) 32%, transparent);
}

html[data-auth-focus-treatment="datum-shelf"] .auth-field.is-invalid {
  --auth-aurora-frame:
    color-mix(in srgb, var(--auth-danger) 76%, var(--auth-ink));
  --auth-aurora-a:
    color-mix(in srgb, var(--auth-danger) 23%, transparent);
  --auth-aurora-b:
    color-mix(in srgb, var(--auth-danger) 16%, transparent);
  --auth-aurora-light:
    color-mix(in srgb, var(--auth-danger) 8%, transparent);
}

html[data-auth-focus-treatment="datum-shelf"] .auth-field.is-warning {
  --auth-aurora-frame:
    color-mix(in srgb, var(--auth-warning) 76%, var(--auth-ink));
  --auth-aurora-a:
    color-mix(in srgb, var(--auth-warning) 24%, transparent);
  --auth-aurora-b:
    color-mix(in srgb, var(--auth-warning) 17%, transparent);
  --auth-aurora-light:
    color-mix(in srgb, var(--auth-warning) 8%, transparent);
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field:has(input:read-only),
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-field.is-expired {
  --auth-aurora-frame:
    color-mix(in srgb, var(--auth-ink-soft) 82%, var(--auth-ink));
  --auth-aurora-a:
    color-mix(in srgb, var(--auth-ink-soft) 14%, transparent);
  --auth-aurora-b:
    color-mix(in srgb, var(--auth-line-strong) 12%, transparent);
  --auth-aurora-light:
    color-mix(in srgb, var(--auth-paper-strong) 24%, transparent);
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control::before,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-cells::after {
  position: absolute;
  z-index: 1;
  inset: 2px;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  background:
    radial-gradient(
      ellipse 44% 180% at 12% 0%,
      var(--auth-aurora-a) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 44% 180% at 88% 100%,
      var(--auth-aurora-b) 0%,
      transparent 74%
    ),
    linear-gradient(
      90deg,
      transparent 10%,
      var(--auth-aurora-light) 50%,
      transparent 90%
    );
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: none !important;
  -webkit-mask: none;
  mask: none;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-ribbon"]
  .auth-field__control::before,
html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-ribbon"]
  .auth-code-cells::after {
  background:
    radial-gradient(
      ellipse 74% 140% at 0% 50%,
      var(--auth-aurora-a) 0%,
      transparent 68%
    ),
    linear-gradient(
      100deg,
      transparent 8%,
      var(--auth-aurora-a) 30%,
      var(--auth-aurora-light) 50%,
      var(--auth-aurora-b) 70%,
      transparent 92%
    );
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  opacity: 1;
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control
  > :is(input, button, .auth-field__action) {
  position: relative;
  z-index: 2;
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-field.is-invalid
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-field.is-warning
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control:has(input:read-only):focus-within {
  border-color: var(--auth-aurora-frame) !important;
  border-style: solid !important;
  border-width: 1px !important;
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--auth-aurora-frame) !important;
  transition: none !important;
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-control:has(input:read-only):focus-within
  .auth-code-cells {
  border-color: var(--auth-aurora-frame) !important;
  border-style: solid !important;
  border-width: 1px !important;
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--auth-aurora-frame) !important;
  transition: none !important;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within {
  border-color: transparent !important;
  border-style: solid !important;
  border-width: 0 0 1px !important;
  box-shadow: inset 0 0 0 2px var(--auth-aurora-frame) !important;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-input="rail"]
  .auth-field__control:not(:has(input:disabled)):focus-within::after {
  transform: scaleX(0);
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field:is(.is-invalid, .is-warning)
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  inset: 3px;
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field:is(.is-invalid, .is-warning)
  .auth-field__control:not(:has(input:disabled)):focus-within,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-field.is-invalid
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells {
  box-shadow: inset 0 0 0 2px var(--auth-aurora-frame) !important;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-input="rail"]
  .auth-field:is(.is-invalid, .is-warning)
  .auth-field__control:not(:has(input:disabled)):focus-within {
  border-color: transparent !important;
  border-style: solid !important;
  border-width: 0 0 1px !important;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-surface="nocturne"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  inset: 3px;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-surface="nocturne"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells {
  box-shadow: inset 0 0 0 2px var(--auth-aurora-frame) !important;
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field:not(.auth-code-field).is-invalid
  input:focus:not(:read-only) {
  caret-color: var(--auth-danger);
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field:not(.auth-code-field).is-warning
  input:focus:not(:read-only) {
  caret-color: var(--auth-warning);
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-control:not(:has(input:read-only, input:disabled)):focus-within
  .auth-code-cell.is-active::before,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-control:not(:has(input:read-only, input:disabled)):focus-within
  .auth-code-cell.has-caret::after {
  background: var(--auth-aurora-frame);
}

html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-field__control::after,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-cells,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-cell,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-cell::before,
html[data-auth-focus-treatment="datum-shelf"]
  .auth-code-selection {
  transition: none !important;
}

@property --auth-aurora-x-a {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 12%;
}

@property --auth-aurora-y-a {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --auth-aurora-x-b {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 88%;
}

@property --auth-aurora-y-b {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --auth-aurora-band-a {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}

@property --auth-aurora-band-b {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 82%;
}

@keyframes auth-aurora-drift-loop {
  0%,
  100% {
    --auth-aurora-x-a: 12%;
    --auth-aurora-y-a: 0%;
    --auth-aurora-x-b: 88%;
    --auth-aurora-y-b: 100%;
  }

  25% {
    --auth-aurora-x-a: 38%;
    --auth-aurora-y-a: 100%;
    --auth-aurora-x-b: 64%;
    --auth-aurora-y-b: 0%;
  }

  50% {
    --auth-aurora-x-a: 88%;
    --auth-aurora-y-a: 100%;
    --auth-aurora-x-b: 12%;
    --auth-aurora-y-b: 0%;
  }

  75% {
    --auth-aurora-x-a: 64%;
    --auth-aurora-y-a: 0%;
    --auth-aurora-x-b: 38%;
    --auth-aurora-y-b: 100%;
  }
}

@keyframes auth-aurora-wave-loop {
  0%,
  100% {
    --auth-aurora-band-a: 18%;
    --auth-aurora-band-b: 82%;
  }

  50% {
    --auth-aurora-band-a: 82%;
    --auth-aurora-band-b: 18%;
  }
}

@keyframes auth-aurora-arrival {
  0% {
    --auth-aurora-x-a: 50%;
    --auth-aurora-y-a: 50%;
    --auth-aurora-x-b: 50%;
    --auth-aurora-y-b: 50%;
    filter: saturate(1.28);
    opacity: 1;
  }

  55% {
    --auth-aurora-x-a: 22%;
    --auth-aurora-y-a: 92%;
    --auth-aurora-x-b: 78%;
    --auth-aurora-y-b: 8%;
    filter: saturate(1.12);
    opacity: 1;
  }

  100% {
    --auth-aurora-x-a: 12%;
    --auth-aurora-y-a: 0%;
    --auth-aurora-x-b: 88%;
    --auth-aurora-y-b: 100%;
    filter: none;
    opacity: 1;
  }
}

html[data-auth-focus-treatment="datum-shelf"]:is(
    [data-auth-focus-motion="aurora-drift"],
    [data-auth-focus-motion="aurora-arrival"]
  )
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="datum-shelf"]:is(
    [data-auth-focus-motion="aurora-drift"],
    [data-auth-focus-motion="aurora-arrival"]
  )
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  background:
    radial-gradient(
      ellipse 44% 180%
        at var(--auth-aurora-x-a) var(--auth-aurora-y-a),
      var(--auth-aurora-a) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 44% 180%
        at var(--auth-aurora-x-b) var(--auth-aurora-y-b),
      var(--auth-aurora-b) 0%,
      transparent 74%
    ),
    linear-gradient(
      90deg,
      transparent 10%,
      var(--auth-aurora-light) 50%,
      transparent 90%
    );
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-drift"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-drift"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  animation: auth-aurora-drift-loop 3.6s linear infinite;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-crosswave"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-crosswave"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  background:
    linear-gradient(
      90deg,
      transparent 0 calc(var(--auth-aurora-band-a) - 14%),
      var(--auth-aurora-a) calc(var(--auth-aurora-band-a) - 8%),
      var(--auth-aurora-light) var(--auth-aurora-band-a),
      var(--auth-aurora-a) calc(var(--auth-aurora-band-a) + 8%),
      transparent calc(var(--auth-aurora-band-a) + 14%) 100%
    ),
    linear-gradient(
      90deg,
      transparent 0 calc(var(--auth-aurora-band-b) - 14%),
      var(--auth-aurora-b) calc(var(--auth-aurora-band-b) - 8%),
      var(--auth-aurora-light) var(--auth-aurora-band-b),
      var(--auth-aurora-b) calc(var(--auth-aurora-band-b) + 8%),
      transparent calc(var(--auth-aurora-band-b) + 14%) 100%
    );
  animation: auth-aurora-wave-loop 4.2s
    cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-arrival"]
  .auth-field__control:not(:has(input:disabled)):focus-within::before,
html[data-auth-focus-treatment="datum-shelf"][data-auth-focus-motion="aurora-arrival"]
  .auth-code-control:not(:has(input:disabled)):focus-within
  .auth-code-cells::after {
  animation: auth-aurora-arrival 480ms
    cubic-bezier(0.45, 0, 0.55, 1) both;
}

html[data-auth-motion="still"][data-auth-focus-treatment="datum-shelf"]
  .auth-field__control::before,
html[data-auth-motion="still"][data-auth-focus-treatment="datum-shelf"]
  .auth-code-cells::after {
  background:
    radial-gradient(
      ellipse 44% 180% at 12% 0%,
      var(--auth-aurora-a) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 44% 180% at 88% 100%,
      var(--auth-aurora-b) 0%,
      transparent 74%
    ),
    linear-gradient(
      90deg,
      transparent 10%,
      var(--auth-aurora-light) 50%,
      transparent 90%
    ) !important;
  animation: none !important;
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html[data-auth-focus-treatment="datum-shelf"]
    .auth-field__control::before,
  html[data-auth-focus-treatment="datum-shelf"]
    .auth-code-cells::after {
    background:
      radial-gradient(
        ellipse 44% 180% at 12% 0%,
        var(--auth-aurora-a) 0%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 44% 180% at 88% 100%,
        var(--auth-aurora-b) 0%,
        transparent 74%
      ),
      linear-gradient(
        90deg,
        transparent 10%,
        var(--auth-aurora-light) 50%,
        transparent 90%
      ) !important;
    animation: none !important;
    filter: none;
    opacity: 1;
  }
}

/* System-color focus remains explicit when authored color is unavailable. */
@media (forced-colors: active) {
  html[data-auth-focus-treatment]
    :is(.auth-field__control::before, .auth-field__control::after),
  html[data-auth-focus-treatment]
    :is(.auth-code-cells::before, .auth-code-cells::after) {
    display: none;
  }

  html[data-auth-focus-treatment]
    .auth-field__control:not(:has(input:disabled)):focus-within,
  html[data-auth-focus-treatment]
    .auth-code-control:not(:has(input:disabled)):focus-within
    .auth-code-cells {
    border-color: Highlight !important;
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}