/* «ربط الجهاز» — the one screen an installer or a second browser on the shop's network opens.
   No shell, no session: page-scoped like onboarding.css, layered on casheer.css's tokens only.
   Tone borrowed from Enrollment.dc.html's highlighted panel — a single card the eye cannot miss.

   Spec 018 P5 T053a: the DS card at Sol's comfortable size — one calm card on the page ground (a
   hairline edge and the soft lift, not a 2px teal frame; the teal is the one primary button), an
   18px title, 13px labels over 40px boxes in body type (44 on touch and phone). Tokens only. The
   pairing screen (tills.css) reuses this panel. */

.setup-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-18);
}

.setup-panel {
  width: 100%;
  max-width: 440px;
  display: grid;
  gap: var(--space-18);
  padding: var(--space-18) calc(var(--pad) + var(--space-4)) calc(var(--pad) + var(--space-6));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}

.setup-brand {
  font-size: var(--t-13);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-align: center;
  direction: ltr;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--line);
}

.setup-step { display: grid; gap: var(--space-12); }

.setup-title { margin: 0; font-size: var(--t-18); font-weight: 650; line-height: 1.5; color: var(--ink); }

.setup-panel .help { font-size: var(--t-12); font-weight: 500; line-height: 1.6; }
.setup-panel .field { gap: var(--space-6); }
.setup-panel .field label { font-size: var(--t-12); font-weight: 600; color: var(--ink-2); }
.setup-panel .input {
  min-height: var(--ctl);
  padding-inline: var(--space-12);
  font-size: var(--t-13);
  font-weight: 600;
}
.setup-panel .banner {
  min-height: 0;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-2);
  font-size: var(--t-12);
  font-weight: 600;
}

.setup-link { text-align: center; color: var(--teal-ink); }