/* WHO'S SERVING on the shared bar tablet (bar_who.rs; Jesse 2026-10-09): the header chip, the
   sheet of staff faces, the big-key PIN pad, the /bar/who page. House neon (bar.css
   tokens), touch targets 56px and up, PIN keys 76px. */

/* the header chip */
.who { display: flex; }
.bar .who-chip { align-items: center; background: rgba(180,140,255,.12); border: 1.5px solid var(--bar-purple); border-radius: 999px; box-shadow: 0 0 14px rgba(180,140,255,.35); color: #fff; display: flex; gap: .55rem; min-height: 56px; padding: .2rem .35rem .2rem .25rem; }
.bar .who-chip:hover { background: rgba(180,140,255,.2); }
.who-chip-face { background: #2a1d5a; border-radius: 50%; box-shadow: 0 0 0 2px var(--bar-purple); color: #fff; display: grid; flex: none; font-size: 1.4rem; height: 46px; overflow: hidden; place-items: center; position: relative; width: 46px; }
.who-chip-face > * { grid-area: 1 / 1; }
.who-chip-face img { height: 100%; object-fit: cover; width: 100%; }
.who-chip-face svg { height: 24px; width: 24px; }
.who-chip-words { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.who-chip-words small { color: #d9c6ff; font: 400 .48rem var(--bar-pixel); letter-spacing: .14em; }
.who-chip-words b { font: 400 1.45rem/1 var(--bar-lcd); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-chip-switch { border-left: 1px solid rgba(180,140,255,.4); color: var(--bar-body); font: 400 .5rem var(--bar-pixel); letter-spacing: .12em; padding: .9rem .6rem .9rem .55rem; }
.bar .who-chip.is-own { background: transparent; border-color: var(--bar-line2); box-shadow: none; }
.bar .who-chip.is-own .who-chip-face { background: #1b2a5a; box-shadow: 0 0 0 2px var(--bar-line2); }
.bar .who-chip.is-own .who-chip-words small { color: var(--bar-muted); }
.bar .who-chip.is-locked { animation: who-glow 2.4s ease-in-out infinite; background: rgba(83,224,255,.08); border: 1.5px dashed var(--bar-blue); box-shadow: none; }
.bar .who-chip.is-locked .who-chip-face { background: transparent; box-shadow: 0 0 0 2px var(--bar-blue); color: var(--bar-blue); }
.bar .who-chip.is-locked .who-chip-words small { color: var(--bar-blue); }
.bar .who-chip.is-locked .who-chip-words b { font-size: 1.25rem; }
@keyframes who-glow { 50% { box-shadow: 0 0 18px rgba(83,224,255,.45); } }
/* TAP switches (no PIN), HOLD adds someone: the slot's auto-spin hold (hold_press.js, 1.2 s); while
   held, a ring fills the chip the way it fills Top Shelf's SPIN (arcade.css ts-arm). */
.bar .who-chip { -webkit-touch-callout: none; position: relative; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.who-chip::after { border-radius: inherit; content: ""; inset: 0; pointer-events: none; position: absolute; }
.who.is-arming .who-chip::after { animation: who-arm 1.2s linear forwards; }
@keyframes who-arm { from { box-shadow: inset 0 0 0 0 rgba(83,224,255,.12), 0 0 0 0 rgba(83,224,255,0); } to { box-shadow: inset 0 0 0 40px rgba(83,224,255,.32), 0 0 18px 2px rgba(83,224,255,.7); } }
.who.is-switching .who-chip { opacity: .7; }
.who-chip-switch { white-space: nowrap; }
/* "Now serving: Dee", a moment over the header */
.who-toast { background: var(--bar-panel2); border: 1.5px solid var(--bar-blue); border-radius: 999px; box-shadow: 0 0 18px rgba(83,224,255,.45); color: #fff; font: 400 1.35rem var(--bar-lcd); left: 50%; padding: .45rem 1.2rem; pointer-events: none; position: fixed; top: .7rem; transform: translateX(-50%); transition: opacity .5s; z-index: 90; }
.who-toast.is-gone { opacity: 0; }
@media (max-width: 760px) { .who-toast { bottom: 1.2rem; top: auto; } }
@media (prefers-reduced-motion: reduce) { .bar .who-chip.is-locked { animation: none; } }

/* the sheet */
.who-sheet { max-width: min(56rem, calc(100vw - 1.5rem)); }
.who-sheet.is-pad { max-width: min(30rem, calc(100vw - 1.5rem)); }
.who-wrap { display: flex; flex-direction: column; gap: .8rem; }
.who-faces-view { display: flex; flex-direction: column; gap: .7rem; }
.who-faces-view[hidden], .loyalty-main .bar form.who-pad[hidden] { display: none; }
.who-sheet .bar-sheet-head span { font-size: 1.2rem; }
.loyalty-main .bar button.bar-close { background: transparent; box-shadow: none; cursor: pointer; font: 400 1.8rem var(--bar-lcd); margin: 0 0 0 auto; min-height: 0; padding: 0; text-shadow: none; }
.who-faces { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.bar .who-face { align-items: center; background: var(--bar-panel); border: 1.5px solid var(--bar-line); border-radius: 18px; display: flex; flex-direction: column; gap: .35rem; min-height: 9.5rem; justify-content: center; padding: .8rem .4rem; text-align: center; }
.bar a.who-face:hover, .bar a.who-face:active { border-color: var(--bar-blue); background: rgba(83,224,255,.08); }
.who-face-pic { background: #1b2a5a; border-radius: 50%; box-shadow: 0 0 0 2px var(--bar-line2); color: #fff; display: grid; font-size: 2.4rem; height: 84px; overflow: hidden; place-items: center; width: 84px; }
.who-face-pic > * { grid-area: 1 / 1; }
.who-face-pic img { height: 100%; object-fit: cover; width: 100%; }
.who-face b { color: #fff; font: 400 1.4rem/1 var(--bar-lcd); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-face small { color: var(--bar-dim); font: 400 .48rem var(--bar-pixel); letter-spacing: .12em; }
.who-face.is-on .who-face-pic { box-shadow: 0 0 0 2px var(--bar-purple), 0 0 14px rgba(180,140,255,.5); }
.who-face.is-on small { color: #d9c6ff; }
.bar .who-face.is-serving { background: rgba(83,224,255,.1); border-color: var(--bar-blue); }
.who-face.is-serving .who-face-pic { box-shadow: 0 0 0 3px var(--bar-blue), 0 0 18px rgba(83,224,255,.6); }
.who-face.is-serving small { color: var(--bar-blue); }
.who-face.is-locked { opacity: .6; }
.who-face.is-locked small { color: var(--bar-pink); }
.who-face.is-nopin { opacity: .45; }
/* SERVING ON THIS TABLET: tap a face to switch (no PIN); × takes them off */
.who-roster { position: relative; }
.loyalty-main .bar .who-roster form { margin: 0; max-width: none; }
.loyalty-main .bar button.who-face { box-shadow: none; color: #fff; cursor: pointer; font: inherit; margin: 0; min-height: 9.5rem; text-shadow: none; text-transform: none; width: 100%; }
.loyalty-main .bar button.who-face:disabled { cursor: default; opacity: 1; }
.loyalty-main .bar button.who-remove { align-items: center; background: #0a0f1f; border: 1.5px solid #3a4778; border-radius: 50%; box-shadow: none; color: var(--bar-pink); cursor: pointer; display: grid; font: 400 1.6rem/1 var(--bar-lcd); height: 44px; margin: 0; min-height: 0; padding: 0; place-items: center; position: absolute; right: -6px; text-shadow: none; top: -6px; width: 44px; }
.loyalty-main .bar button.who-remove:hover { background: rgba(255,154,184,.15); }
.bar .who-sheet h3.who-add { border-top: 1px solid var(--bar-line); color: #fff; font: 400 .66rem var(--bar-pixel); letter-spacing: .12em; margin: .3rem 0 0; padding-top: .8rem; }
.who-alert { background: rgba(83,224,255,.08); border: 1.5px solid var(--bar-blue); border-radius: 14px; color: var(--bar-blue-soft); font-size: 1.25rem; margin: 0; padding: .55rem .8rem; }
.who-foot { border-top: 1px solid var(--bar-line); display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .8rem; }
.loyalty-main .bar .who-foot form { display: flex; flex: 1 1 15rem; margin: 0; max-width: none; }
.loyalty-main .bar .who-foot form button { flex: 1; }
.loyalty-main .bar .who-foot button { background: transparent; border: 1.5px solid #fff; border-radius: 16px; box-shadow: none; color: #fff; cursor: pointer; font: 400 .62rem var(--bar-pixel); letter-spacing: .1em; margin: 0; min-height: 56px; padding: 0 1.1rem; text-shadow: none; text-transform: none; width: auto; }
.loyalty-main .bar .who-foot button.who-forget { border-color: var(--bar-line2); color: var(--bar-body); }
.who-foot .bar-hint { flex-basis: 100%; }
.who-foot .bar-hint b { color: #fff; font-weight: 400; }

/* the PIN pad */
.loyalty-main .bar form.who-pad { align-items: stretch; display: flex; flex-direction: column; gap: .7rem; margin: 0 auto; max-width: 24rem; width: 100%; }
.who-pad-head { align-items: center; display: flex; gap: .8rem; }
.bar .who-pad-back { border: 1.5px solid #3a4778; border-radius: 50%; color: var(--bar-body); display: grid; flex: none; font-size: 2rem; height: 56px; place-items: center; width: 56px; }
.who-face-pic.is-pad { box-shadow: 0 0 0 3px var(--bar-purple), 0 0 16px rgba(180,140,255,.5); flex: none; font-size: 2rem; height: 72px; width: 72px; }
.who-pad-who { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.who-pad-who small { color: var(--bar-blue); font: 400 .55rem var(--bar-pixel); letter-spacing: .14em; }
.who-pad-who b { color: #fff; font: 400 2.1rem/1.05 var(--bar-lcd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loyalty-main .bar .who-pin { background: #070b18; border: 1.5px solid var(--bar-line2); border-radius: 14px; box-shadow: none; color: #fff; font: 400 2rem var(--bar-lcd); letter-spacing: .4em; margin: 0; min-height: 60px; padding: 0 1rem; text-align: center; }
.who-dots, .who-keys { display: none; }
.who-js .who-dots { display: flex; gap: .9rem; justify-content: center; padding: .4rem 0; }
.who-js .who-keys { display: grid; }
.loyalty-main .bar .who-js .who-pin { display: none; }
.who-dots i { border: 2px solid var(--bar-line2); border-radius: 50%; height: 20px; transition: background .1s, border-color .1s; width: 20px; }
.who-dots i:nth-child(n+5) { border-style: dashed; }
.who-dots i.is-on { background: var(--bar-blue); border-color: var(--bar-blue); border-style: solid; box-shadow: 0 0 12px rgba(83,224,255,.7); }
.who-msg { color: var(--bar-muted); font-size: 1.3rem; margin: 0; min-height: 1.4em; text-align: center; }
.who-msg.is-bad { color: var(--bar-pink); }
.who-keys { gap: .6rem; grid-template-columns: repeat(3, 1fr); }
.loyalty-main .bar button.who-key { background: var(--bar-panel2); border: 1.5px solid var(--bar-line2); border-radius: 18px; box-shadow: none; color: #fff; cursor: pointer; font: 400 2.6rem/1 var(--bar-lcd); margin: 0; min-height: 76px; padding: 0; text-shadow: none; touch-action: manipulation; user-select: none; width: auto; }
.loyalty-main .bar button.who-key:active { background: rgba(83,224,255,.22); border-color: var(--bar-blue); transform: none; }
.loyalty-main .bar button.who-key.is-word { color: var(--bar-body); font: 400 .62rem var(--bar-pixel); letter-spacing: .1em; }
.loyalty-main .bar button.who-key[data-key="back"] { font: 400 1.8rem var(--bar-lcd); }
.loyalty-main .bar button.who-ok { background: var(--bar-blue); border: 0; border-radius: 18px; box-shadow: 0 0 18px rgba(83,224,255,.5); color: #04121a; cursor: pointer; font: 400 .8rem var(--bar-pixel); letter-spacing: .1em; margin: 0; min-height: 68px; padding: 0 1rem; text-shadow: none; width: 100%; }
.loyalty-main .bar button.who-ok:disabled { opacity: .6; }
.who-pad.is-shake { animation: who-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes who-shake { 15%, 85% { transform: translateX(-4px); } 30%, 70% { transform: translateX(9px); } 45% { transform: translateX(-12px); } 60% { transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .who-pad.is-shake { animation: none; } }

/* the /bar/who page */
.bar .who-back { align-items: center; border: 1.5px solid var(--bar-line2); border-radius: 999px; color: var(--bar-body); display: flex; font: 400 .62rem var(--bar-pixel); letter-spacing: .1em; margin-left: auto; min-height: 52px; padding: 0 1.1rem; }
.who-page-body { display: flex; justify-content: center; padding: 1rem; }
.bar-sheet.who-sheet.is-page { box-sizing: border-box; display: block; margin: 0 auto; max-height: none; position: static; }

/* BAR PIN in the PLAYERS clock strip */
.bar .bp-pin { align-items: center; border-top: 1px solid var(--bar-row); display: flex; gap: .6rem; grid-column: 1 / -1; min-height: 48px; padding-top: .4rem; }
.bp-pin b { color: #d9c6ff; font: 400 .55rem var(--bar-pixel); letter-spacing: .12em; }
.bp-pin span { color: var(--bar-muted); font-size: 1.15rem; }
.bp-pin.is-new span { color: var(--bar-blue-soft); }

/* a tablet held upright: the chip drops its SWITCH label so the header stays on one row */
@media (max-width: 1000px) {
  .who-chip-switch { display: none; }
  .bar .who-chip { padding-right: .85rem; }
  .who-chip-words b { max-width: 6.5rem; }
  .bar-head:has(.who) { gap: .5rem .55rem; }
  .bar .bar-head:has(.who) .bar-open { padding: 0 .9rem; }
  .bar .bar-head:has(.who) .bar-sections a { padding: 0 .65rem; }
}

@media (max-width: 760px) {
  .who-chip-words b { max-width: 6rem; }
  .who-faces { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .who-face-pic { height: 68px; width: 68px; }
}