/* rePAT — the only stylesheet. Bootstrap does the rest.
   Q12: the operator device is "a phone or a tablet, whichever is to hand", so the
   floor-facing rules are mobile-first and the wizard has to work at 390px. */

:root {
  --repat-tap: 48px;   /* minimum touch target on a floor device */
}

body { -webkit-text-size-adjust: 100%; }

/* ---------------------------------------------------------------- banners */
.dev-banner,
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1035;          /* above the navbar's 1030 */
  padding: .4rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
}
.dev-banner { background: #6f42c1; color: #fff; }
.impersonation-banner { background: #ffc107; color: #332701; }
.impersonation-banner a { color: #332701; text-decoration: underline; }

/* ---------------------------------------------------------------- floor devices */
/* Bootstrap's default 32-38px controls are fine with a mouse and not with a gloved
   thumb. 48px is the smallest target that is reliably hittable one-handed. */
@media (max-width: 767.98px) {
  .btn,
  .form-control,
  .form-select,
  .nav-link,
  .list-group-item-action {
    min-height: var(--repat-tap);
  }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .table-responsive-stack td { padding: .5rem; }
  main.container, main.container-fluid { padding-left: .75rem; padding-right: .75rem; }
  h1, .h1 { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------- the wizard */
/* The scan step has no focused input on purpose — a focused <input> raises the soft
   keyboard, which eats half a phone screen and is useless when a Bluetooth gun is
   doing the typing. This fake caret is the only feedback the operator gets, so it
   has to be obvious. */
.scan-buffer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.75rem, 9vw, 3rem);
  letter-spacing: .12em;
  min-height: 3.5rem;
  word-break: break-all;
}
.scan-caret {
  display: inline-block;
  width: .6em;
  background: currentColor;
  animation: repat-blink 1.05s steps(1) infinite;
}
@keyframes repat-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scan-caret { animation: none; } }

/* Pass / Fail. Big, unambiguous, and never adjacent enough to mis-tap. */
.check-answer .btn {
  min-height: 4.25rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.grade-btn {
  min-height: 6rem;
  font-size: 2rem;
  font-weight: 700;
}

.stage-rail { font-size: .8rem; }
.stage-rail .done   { color: var(--bs-success); }
.stage-rail .now    { color: var(--bs-primary); font-weight: 700; }
.stage-rail .todo   { color: var(--bs-secondary-color); }

.declared-fault {
  background: #fff3cd;
  border-left: .25rem solid #ffc107;
  padding: .5rem .75rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- misc */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cursor-pointer { cursor: pointer; }
.dropzone {
  border: .15rem dashed var(--bs-border-color);
  border-radius: .5rem;
  padding: 2rem 1rem;
  text-align: center;
}
.dropzone.dragover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }