/* Technician / manager sign-in and first-time setup (design-system 2(f2), 2(f3)). Phone first, one 400 px column, centered on desktop.
 * Reads tokens only. Theme follows the phone (Steel dark / Galvanized light). */
body { min-height: 100vh; }
.page { max-width: calc(var(--w-phone-col) - var(--space-5) - var(--space-4)); margin: 0 auto; padding-bottom: var(--space-7); }   /* 440 px column ~ the design's 400 px + gutters */
.topbar { background: var(--c-brand); color: var(--c-on-brand); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.topbar .logo { height: var(--touch-min); }
.topbar .logo img { height: 100%; }
.topbar .wordmark { font-size: var(--fs-h3); line-height: 1; }
main { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-4); }
h1 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h1); line-height: var(--lh-h1); text-transform: uppercase; letter-spacing: var(--ls-display); }
form { display: grid; gap: var(--space-4); }
.step { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); min-width: 0; }
label { font-weight: var(--fw-body-strong); font-size: var(--fs-small); line-height: var(--lh-small); }
input[type="text"] { width: 100%; min-height: calc(var(--space-7) + var(--space-2)); padding: 0 var(--space-4); font: inherit; font-size: var(--fs-body); color: var(--c-ink);
  background: var(--c-surface); border: 2px solid var(--c-muted); border-radius: var(--radius-sm); }
input[type="text"]:focus { border-color: var(--c-focus); outline: 2px solid var(--c-focus); outline-offset: 0; }
.fieldhint, .help { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }

/* PIN: one real input laid over N boxes (the boxes are decoration and mirror what is typed) */
.pin { display: grid; gap: var(--space-1); justify-items: end; }
.pinwrap { position: relative; width: 100%; }
.pinboxes { display: flex; gap: var(--space-2); }
.pinbox { flex: 1; min-width: 0; min-height: calc(var(--space-7) + var(--space-2)); display: grid; place-items: center; font-family: var(--font-num); font-weight: var(--fw-num);
  font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--c-ink); background: var(--c-surface); border: 2px solid var(--c-muted); border-radius: var(--radius-sm); }
.pinbox.on { border-color: var(--c-focus); outline: 2px solid var(--c-focus); }
.pinwrap input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: var(--fs-body); }
.pinwrap input:focus { outline: none; }
.pinwrap:focus-within .pinbox.on { border-color: var(--c-focus); }

/* buttons: 56 px tall full width primary; secondary is outlined; link-style for Show / Back */
.btn { display: grid; place-items: center; width: 100%; min-height: calc(var(--space-7) + var(--space-2)); padding: 0 var(--space-4); font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-h3); letter-spacing: var(--ls-display); text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); border: 2px solid var(--c-ink); cursor: pointer; }
.btn.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.btn.primary:disabled { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--c-ink); }
.btn.small { width: auto; min-height: var(--touch-min); margin-top: var(--space-2); font-size: var(--fs-small); background: transparent; color: inherit; border-color: currentColor; }
.linkbtn { background: none; border: 0; padding: 0 var(--space-2); min-height: var(--touch-min); font: inherit; font-size: var(--fs-small); color: var(--c-ink); text-decoration: underline; cursor: pointer; justify-self: start; }
.pin .linkbtn { justify-self: end; }

/* messages: one area under the heading. error = red text + "!" icon on a soft red; note = calm grey */
.msg { margin: 0; padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--fs-body); line-height: var(--lh-body); border: var(--panel-border); border-radius: var(--radius-sm); }
.msg.bad { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-text); }
.msg.note { background: var(--c-surface-2); color: var(--c-ink); }
.msg .ico { flex: none; width: var(--fs-h3); height: var(--fs-h3); display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: var(--radius-pill); font-weight: var(--fw-body-strong); font-size: var(--fs-caption); line-height: 1; }
.msg .txt { flex: 1 1 0; min-width: 0; }
.msg .hint { flex-basis: 100%; color: var(--c-ink); font-size: var(--fs-small); line-height: var(--lh-small); }

/* bot check: invisible most of the time. The stub (test mode) is a small grey line. */
.bot:empty { display: none; }
.botcheck-stub { margin: 0; display: flex; gap: var(--space-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-muted); border: 1px dashed var(--c-line); padding: var(--space-1) var(--space-3); }

/* setup: step dots */
.steps { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--c-muted); }
.dots { display: inline-flex; gap: var(--space-1); }
.dot { width: var(--space-3); height: var(--space-3); background: var(--c-surface-2); border: 1px solid var(--c-muted); border-radius: var(--radius-sm); }
.dot.on { background: var(--c-accent); border-color: var(--c-accent); }