@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer elements {
  .kit-role-one-time-code {
    overflow-wrap: break-word;
  }
}
@layer roles {
  .kit-role-one-time-code[data-kit-state~=disabled]:before {
    border-color: var(--_kit-panel-boundary);
    background-color: color-mix(in oklch, var(--_kit-text-muted) 18%, var(--_kit-panel-surface));
  }
  .kit-role-one-time-code {
    --_kit-code-cell: var(--_kit-control-height);
    --_kit-code-length: 6;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    justify-items: start;
    gap: var(--_kit-inset-tight) var(--_kit-cluster-gap);
    min-inline-size: 0;
  }
  .kit-role-one-time-code > .kit-region-text {
    grid-column: 1 / -1;
  }
  .kit-role-one-time-code[data-kit-holds~=four] {
    --_kit-code-length: 4;
  }
  .kit-role-one-time-code[data-kit-holds~=five] {
    --_kit-code-length: 5;
  }
  .kit-role-one-time-code[data-kit-holds~=seven] {
    --_kit-code-length: 7;
  }
  .kit-role-one-time-code[data-kit-holds~=eight] {
    --_kit-code-length: 8;
  }
  .kit-role-one-time-code:before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    box-sizing: border-box;
    inline-size: calc(var(--_kit-code-length) * var(--_kit-code-cell) + 2 * var(--_kit-rule));
    block-size: calc(var(--_kit-code-cell) + 2 * var(--_kit-rule));
    border: var(--_kit-rule) solid var(--_kit-field-edge);
    border-radius: var(--_kit-radius);
    background-color: var(--_kit-panel-surface);
    background-image:
      repeating-linear-gradient(
        to right,
        transparent 0 calc(var(--_kit-code-cell) - var(--_kit-rule)),
        var(--_kit-muted) 0 var(--_kit-code-cell));
    background-size: calc((var(--_kit-code-length) - 1) * var(--_kit-code-cell)) 100%;
    background-repeat: no-repeat;
  }
  .kit-role-one-time-code[data-kit-holds~=six]:before {
    background-image:
      linear-gradient(
        to right,
        transparent calc(3 * var(--_kit-code-cell) - 2 * var(--_kit-rule)),
        var(--_kit-muted) 0),
      repeating-linear-gradient(
        to right,
        transparent 0 calc(var(--_kit-code-cell) - var(--_kit-rule)),
        var(--_kit-muted) 0 var(--_kit-code-cell));
    background-size: calc(3 * var(--_kit-code-cell)) 100%, calc(5 * var(--_kit-code-cell)) 100%;
  }
  .kit-role-one-time-code:has(> .kit-region-text:focus-visible):before {
    outline: var(--_kit-focus-edge) solid var(--_kit-text-ink);
    outline-offset: var(--_kit-focus-edge);
    box-shadow: 0 0 0 var(--_kit-focus-edge) var(--_kit-focus-halo);
  }
  .kit-role-one-time-code > .kit-region-text {
    --_kit-code-gap: calc(var(--_kit-code-cell) - 1ch);
    position: relative;
    box-sizing: content-box;
    inline-size: calc(var(--_kit-code-length) * var(--_kit-code-cell));
    max-inline-size: none;
    block-size: var(--_kit-code-cell);
    margin: 0;
    padding: var(--_kit-rule) 0 var(--_kit-rule) calc(var(--_kit-rule) + var(--_kit-code-gap) / 2);
    border: 0;
    border-radius: var(--_kit-radius);
    background: none;
    color: var(--_kit-text-ink);
    font-family: var(--_kit-mono-family);
    font-size: var(--_kit-value-size);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--_kit-code-gap);
    clip-path: inset(0 calc(var(--_kit-code-gap) / 2 - var(--_kit-rule)) 0 0);
  }
  .kit-role-one-time-code > .kit-region-text:focus-visible {
    outline: none;
    box-shadow: none;
  }
}
@layer layouts {
  @media screen {
    .kit-region-form-row-list[data-kit-fit=lined] > .kit-region-form-row > .kit-role-form-group > .kit-role-one-time-code {
      grid-row: 2;
    }
  }
  @media screen {
    @container (inline-size >= 720px) {
      .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-region-filters > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-region-filters > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-calendar > .kit-region-toolbar > .kit-region-view > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-view > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-region-filters > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-region-filters > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-filters > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-reports > .kit-region-period-filters-schedule > :where(.kit-region-period-filters:not([hidden])) > .kit-region-filters > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code,
      .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-role-form-group[data-kit-holds~=help] > .kit-role-one-time-code {
        justify-self: start;
      }
    }
  }
  @media screen {
    .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-view > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-view > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > :where(.kit-region-period-filters:not([hidden])) > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > :where(.kit-region-period-filters:not([hidden])) > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code {
      grid-column: 2;
    }
  }
  @media screen {
    .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-view > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-view > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > :where(.kit-region-period-filters:not([hidden])) > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-list > .kit-region-saved-views-filters-sort > :where(.kit-region-form) > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-reports > .kit-region-period-filters-schedule > :where(.kit-region-period-filters:not([hidden])) > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code,
    .kit-layout-calendar > .kit-region-toolbar > .kit-region-scope-form > .kit-region-scope > .kit-region-filters > .kit-region-filter > .kit-role-popover:not(:popover-open) > .kit-role-form-group > .kit-role-one-time-code {
      grid-row: 2 / span 2;
    }
  }
  @media screen {
    @container (inline-size >= 720px) {
      .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code,
      .kit-layout-reports > .kit-region-period-filters-schedule > .kit-region-period-filters > .kit-region-filters > .kit-role-form-group > .kit-role-one-time-code {
        margin-block-start: calc(var(--_kit-rhythm) - var(--_kit-stack));
      }
    }
  }
}
@layer without-fills {
  @media (forced-colors: active) {
    .kit-role-one-time-code:before,
    .kit-role-one-time-code > input {
      forced-color-adjust: none;
    }
  }
}
