/* The connector's pages (connect.css): one control per step. The address and its button in one
 * frosted bar, six slots of ice for the code, Deny and Allow, and on the landing page the address
 * to copy and the taps in each app. */
.cc-connect-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 13px;
  background: var(--cn-blue);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 10px 22px -12px rgb(18 85 223 / 0.75);
  color: var(--cn-white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
}
.cc-connect-button:hover {
  background: var(--cn-blue-down);
}
.cc-connect-button--quiet {
  background: transparent;
  box-shadow: none;
  color: var(--cn-ink-2);
}
.cc-connect-button--quiet:hover {
  background: var(--cn-hover);
  color: var(--cn-navy);
}

/* Step 1: the address and its button, one frosted bar. */
.cc-connect-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 440px;
  max-width: 100%;
  height: 62px;
  margin-top: 30px;
  padding: 7px 7px 7px 22px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.86);
  box-shadow:
    inset 0 0 0 1px var(--cn-line),
    0 1px 0 var(--cn-white),
    var(--cn-lift);
}
.cc-connect-field:focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--cn-blue),
    0 0 0 5px var(--cn-ring),
    var(--cn-lift);
}
[data-wrong] .cc-connect-field {
  box-shadow:
    inset 0 0 0 1.5px var(--cn-wrong),
    var(--cn-lift);
}
.cc-connect-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cn-navy);
  caret-color: var(--cn-blue);
  font: inherit;
  font-size: 17px;
}
.cc-connect-input::placeholder {
  color: var(--cn-hint);
}
.cc-connect-field .cc-connect-button {
  height: 48px;
}
.cc-connect .cc-connect-input:focus-visible,
.cc-connect .cc-connect-code-input:focus-visible {
  outline: none;
}

/* Step 2: six slots of ice. Without the script the digits are the field's own, spaced into the
 * slots; with it (connect.js) each lands in its slot, and the slots part in threes. */
.cc-connect-code-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
.cc-connect-code {
  --slot: 56px;
  --gap: 10px;
  position: relative;
  display: block;
  width: calc(6 * var(--slot) + 5 * var(--gap));
  height: 68px;
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cc-connect-slots {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--gap);
  pointer-events: none;
}
.cc-connect-slots > span {
  position: relative;
  display: grid;
  flex: 0 0 var(--slot);
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(244 250 255 / 0.8));
  box-shadow:
    inset 0 0 0 1px var(--cn-line),
    inset 0 -8px 16px -12px rgb(63 123 255 / 0.25),
    0 16px 30px -22px rgb(18 85 223 / 0.5);
  color: var(--cn-navy);
  letter-spacing: -0.02em;
}
.cc-connect-slots > [data-filled] {
  background: linear-gradient(180deg, var(--cn-white), var(--cn-frost));
  box-shadow:
    inset 0 0 0 1px var(--cn-line-hi),
    inset 0 1px 0 var(--cn-white),
    0 16px 30px -22px rgb(18 85 223 / 0.5);
}
.cc-connect-code:focus-within .cc-connect-slots > [data-active],
html:not(.cc-js) .cc-connect-code:focus-within .cc-connect-slots > span {
  box-shadow:
    inset 0 0 0 1.5px var(--cn-blue),
    0 0 0 5px var(--cn-ring),
    0 16px 30px -22px rgb(18 85 223 / 0.5);
}
.cc-connect-code:focus-within .cc-connect-slots > [data-active]::after {
  content: '';
  width: 2px;
  height: 28px;
  border-radius: 1px;
  background: var(--cn-blue);
}
[data-wrong] .cc-connect-slots > span {
  box-shadow: inset 0 0 0 1.5px var(--cn-wrong);
}
.cc-connect-code-input {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 calc(var(--slot) / 2 - 0.5ch);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cn-navy);
  caret-color: var(--cn-blue);
  font: inherit;
  letter-spacing: calc(var(--slot) + var(--gap) - 1ch);
}
.cc-js .cc-connect-slots > span:nth-child(4) {
  margin-left: 14px;
}
.cc-js .cc-connect-code {
  width: calc(6 * var(--slot) + 5 * var(--gap) + 14px);
}
.cc-js .cc-connect-code-input {
  color: transparent;
  caret-color: transparent;
  cursor: text;
}
.cc-connect-continue {
  margin-top: 22px;
}
.cc-js .cc-connect-continue {
  display: none;
}
.cc-connect-code-form .cc-connect-small {
  margin-top: 22px;
}

/* Step 3: what it can do, then Deny and Allow. */
.cc-connect-scope {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.cc-connect-scope li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cn-ink-2);
  font-size: 15px;
  text-align: left;
}
.cc-connect-scope svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--cn-blue);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-connect-answer {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.cc-connect-answer .cc-connect-button {
  min-width: 132px;
  height: 50px;
  border-radius: 14px;
  font-size: 16px;
}