/* Link your Fidget (/my-fidget/link/) - the phone "code path" setup screen.
   Tokens come from cf-kit.css; the desktop layout is the same column,
   centered in the site's content area. */

body.cf-link-page { background: var(--cf-bg-deep); }
.cf-link [hidden] { display: none !important; }

.cf-link {
  max-width: 390px;
  margin: 0 auto;
  padding: 12px 0 96px; /* clears the fixed Feedback bubble on phones */
  color: var(--cf-ink);
}

.cf-link-eyebrow {
  margin: 0;
  font-family: var(--cf-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cf-cyan);
}

.cf-link-title {
  margin: 10px 0 0;
  font-family: var(--cf-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cf-ink);
}

.cf-link-lead, .cf-link-wifi, .cf-link-usb {
  margin: 10px 0 0;
  font-family: var(--cf-font-display);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cf-ink-dim);
}
.cf-link-lead b, .cf-link-wifi b { color: var(--cf-ink); font-weight: 700; }
.cf-link-usb a { color: var(--cf-cyan); }

/* the Fidget's screen, as the user will see it */
.cf-link-device {
  width: 268px;
  margin: 30px auto 0;
  padding: 6px;
  background: linear-gradient(180deg, #2a2540, #1a1628);
  border: 1px solid #3a3452;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 0 rgba(0, 0, 0, .5);
  box-sizing: border-box;
}
.cf-link-oled {
  position: relative;
  height: 128px;
  background-color: #050a08;
  background-image:
    linear-gradient(rgba(184, 241, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 241, 255, .035) 1px, transparent 1px);
  background-size: 2px 2px;
}
.cf-link-oled-label,
.cf-link-oled-code {
  position: absolute;
  left: 18px;
  font-family: var(--cf-font-pixel);
  color: #b8f1ff;
  white-space: pre;
}
.cf-link-oled-label { top: 12px; font-size: 10px; line-height: 10px; }
.cf-link-oled-code { top: 36px; left: 36px; font-size: 16px; line-height: 16px; }

.cf-link-form { margin: 26px 0 0; }

.cf-link-boxes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.cf-link-box {
  width: 42px;
  height: 52px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(245, 236, 255, .1);
  border-radius: 0;
  background: rgba(0, 0, 0, .4);
  color: var(--cf-cyan);
  font-family: var(--cf-font-mono);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  caret-color: var(--cf-cyan);
}
.cf-link-box.is-filled { border-color: var(--cf-cyan); }
.cf-link-box:focus {
  outline: none;
  border-color: var(--cf-cyan);
  box-shadow: 0 0 0 1px rgba(104, 225, 253, .35);
}
.cf-link-boxes.is-error .cf-link-box { border-color: var(--cf-magenta); }

.cf-link-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cf-link-msg {
  margin: 14px 0 0;
  font-family: var(--cf-font-mono);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  color: var(--cf-magenta);
}
.cf-link-msg.is-info { color: var(--cf-ink-dim); }

/* primary: the kit's chamfered neon button at full column width */
.cf-link-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 41px;
  margin-top: 26px;
  padding: 12px 22px;
  box-sizing: border-box;
  border: 0;
  background: var(--cf-magenta);
  color: var(--cf-bg-deep);
  font-family: var(--cf-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.cf-link-primary:hover { filter: brightness(1.12); }
.cf-link-primary:focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 3px; }
.cf-link-primary:disabled { cursor: progress; filter: saturate(.6) brightness(.85); }

.cf-link-secondary {
  padding: 9px 16px;
  border: 1px solid rgba(104, 225, 253, .5);
  background: transparent;
  color: var(--cf-cyan);
  font-family: var(--cf-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cf-link-text {
  padding: 9px 4px;
  border: 0;
  background: transparent;
  color: var(--cf-ink-dim);
  font-family: var(--cf-font-mono);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.cf-link-signin-note {
  margin: 12px 0 0;
  font-family: var(--cf-font-mono);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  color: var(--cf-ink-dim);
}

.cf-link-panel {
  margin-top: 26px;
  padding: 16px;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-bg-line);
}
.cf-link-panel-title {
  margin: 0;
  font-family: var(--cf-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cf-ink);
}
.cf-link-panel-body,
.cf-link-panel-list {
  margin: 8px 0 0;
  font-family: var(--cf-font-display);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cf-ink-dim);
}
.cf-link-panel-list { padding-left: 18px; }
.cf-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
}
.cf-link-actions .cf-link-primary { margin-top: 0; }
.cf-link-confirm {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cf-bg-line);
}
.cf-link-done .cf-link-panel-title { color: var(--cf-green); }
.cf-link-done .cf-link-primary { margin-top: 16px; }

.cf-link-note {
  margin: 18px auto 0;
  max-width: 330px;
  font-family: var(--cf-font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--cf-ink-mute);
}