/* One code in, one tap out (iteration 7, D-132). Built from system.css tokens only.
   The code screen (#/), the lock screen, the Sign out button in every bar, and the
   crew entries on People and Assign. */

/* ----- the code screen ------------------------------------------------------------------ */
.si-card { width: min(100%, 440px); justify-items: center; gap: var(--sp-5); }
.si-brand { display: grid; justify-items: center; gap: 10px; text-align: center; }
.si-shop { margin: 0; font-size: var(--t-title2); font-weight: 600; letter-spacing: -0.022em; overflow-wrap: anywhere; }

/* Big keys: an iPad on a bench is read from arm's length, often with gloves. */
.pinpad-big { --key: 84px; gap: 20px; }
.pinpad-big .pinpad-prompt b { font-size: var(--t-title1); }
.pinpad-big .pinpad-dots { gap: 18px; height: 16px; }
.pinpad-big .pinpad-dot { width: 16px; height: 16px; }
.pinpad-big .pinpad-grid { gap: 14px; }
.pinpad-big .pinpad-key span { font-size: 36px; }
@media (min-width: 700px) and (min-height: 860px) {
  .pinpad-big { --key: 96px; }
  .pinpad-big .pinpad-key span { font-size: 40px; }
}
@media (max-height: 760px) { .pinpad-big { --key: 70px; gap: 14px; } .pinpad-big .pinpad-grid { gap: 10px; } }

/* Test codes (demo and the shared test shop only): a tap types the code. */
.si-codes { width: 100%; display: grid; gap: 10px; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.si-codes-h { margin: 0; text-align: center; font-size: var(--t-footnote); font-weight: 500; color: var(--text-3); }
.si-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.si-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 10px;
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--panel); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-1);
  transition: border-color var(--dur-ui) var(--ease), transform 80ms var(--ease);
}
.si-chip:hover { border-color: var(--line-strong); }
.si-chip:active { transform: scale(.98); background: var(--press); }
.si-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.si-chip b { font-family: var(--font-mono); font-size: var(--t-headline); font-weight: 600; letter-spacing: .04em; color: var(--brand-ink); }
.si-chip > span { display: grid; line-height: 1.2; }
.si-chip-name { font-size: var(--t-subhead); font-weight: 500; }
.si-chip small { font-size: var(--t-caption1); color: var(--text-3); }

.si-foot { width: 100%; display: grid; justify-items: center; gap: 12px; }
.si-tv { color: var(--text-2); }
.si-tv .ico { color: var(--text-3); }

/* ----- Sign out: always in the bar ----------------------------------------------------------- */
.si-out { flex: none; white-space: nowrap; }
.si-out .ico { width: 20px; height: 20px; }
/* Employee floor bar: icon and word on an iPad, the icon on a phone (the word stays the accessible name). */
.floor-signout { min-height: 48px; padding: 0 16px 0 13px; }
@media (max-width: 767.98px) {
  .floor-signout { padding: 0; width: 48px; }
  .floor-signout span { display: none; }
}
/* Manager and owner top bar: the same, compact. */
.navbar-signout { min-height: 36px; padding: 0 12px 0 10px; }
@media (max-width: 767.98px) {
  .navbar .navbar-signout { padding: 0; width: var(--tap); background: none; border-color: transparent; box-shadow: none; }
  .navbar-signout span { display: none; }
}

/* ----- the crew editor from People and Assign ------------------------------------------------- */
.si-rail-crew { justify-self: start; margin-top: 4px; color: var(--brand-ink); }
.si-rail-crew .ico { color: currentColor; }