/* The pairing page's own styles. The palette, the header and the language and
   theme controls live in shared.css, loaded before this. */

/* Code entry. The whole strip takes clicks, not just the boxes: the gaps
   between them look like part of the field, so landing there should put the
   caret in the first empty box rather than do nothing. */
.code {
  display: flex;
  justify-content: center;
  gap: .55rem;
  padding: .25rem 0;
  cursor: text;
}
.code input {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 0;
  border-radius: .5rem;
  background: var(--tile);
  color: var(--txt);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.code input:focus {
  outline: 2px solid var(--bf);
  outline-offset: 2px;
}
.code input.filled { box-shadow: inset 0 0 0 1.5px var(--bf); }

/* Where to find the code */
.callout {
  margin-top: 1.4rem;
  padding: .9rem;
  border-radius: .5rem;
  background: var(--tile);
}
.callout__title { font-size: .85rem; font-weight: 700; margin: 0 0 .6rem; }
.callout__text { font-size: .75rem; line-height: 1.45; color: var(--muted); margin: .6rem 0 0; }

/* The code changes: said next to the boxes, in the page's accent colour
   rather than the error one — it is a reminder, not a fault. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .9rem 0 0;
  padding: .6rem .75rem;
  border-radius: .5rem;
  border-left: 3px solid var(--bf);
  background: var(--tile);
  background: color-mix(in srgb, var(--bf) 9%, var(--bg));
  font-size: .8rem;
  line-height: 1.4;
}
/* Two lines: what happens, then what to do. */
.notice strong, .notice strong + span { display: block; }
.notice svg { flex: none; width: 1.1rem; height: 1.1rem; fill: var(--bf); margin-top: .05rem; }

/* Illustration: geometric on purpose, so it never reads as a real code */
.sample {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  padding: .6rem .7rem;
  border-radius: .5rem;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* The illustration is not content to copy: selecting the example code would
   only lead to typing it in. Everything else on the page stays selectable —
   an error message is worth being able to copy. */
.sample { user-select: none; }

.sample__badge {
  position: absolute;
  top: -.55rem;
  left: .6rem;
  padding: 0 .4rem;
  border-radius: .25rem;
  background: var(--muted);
  color: var(--bg);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sample__qr { width: 3.1rem; height: 3.1rem; flex: none; }
.sample__qr .qr-eye { fill: var(--muted); }
.sample__qr .qr-eye-in { fill: var(--bg); }
.sample__qr .qr-dot { fill: var(--muted); }
.sample__url { font-size: .62rem; color: var(--muted); }
.sample__text { display: flex; flex-direction: column; gap: .1rem; }
.sample__from {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sample__code {
  font-family: monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
}

.doc {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .75rem;
}
.doc a { color: var(--bf); font-weight: 600; }