/* Record as (BUG-142): the full-screen roster and PIN pad, copied from CloudPin's
   floor login (docs/refs/cloudpin-kiosk/styles.css) so the two screens read as the
   same thing: one monospace face (a system stack, nothing loaded from elsewhere),
   square corners, hairline frames, ink and the one salmon accent, flat. Every rule
   is scoped to .recorder-panel, so nothing else in the Portal changes. */
.recorder-panel {
  --rp-ink: #17181c;
  --rp-ink-2: #3b3f45;
  --rp-salmon: #d8556e;
  --rp-salmon-dark: #c0392b;
  --rp-salmon-soft: #fbeef1;
  --rp-muted: #8b9198;
  --rp-line: #e2e1db;
  --rp-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; color: var(--rp-ink); font-family: var(--rp-mono);
  overflow: hidden;
}
.recorder-panel *, .recorder-panel *::before, .recorder-panel *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.recorder-panel[hidden], .recorder-panel [hidden] { display: none !important; }

.recorder-panel .rp-card {
  position: relative; width: 100%; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 4vh, 56px) clamp(20px, 5vw, 72px);
}
.recorder-panel .rp-roster-view { display: flex; flex-direction: column; min-height: 0; max-height: 100%; width: 100%; max-width: 980px; }
.recorder-panel .rp-pin-view { display: flex; align-items: center; justify-content: center; width: 100%; }

.recorder-panel .rp-brand {
  text-align: center; text-transform: uppercase; letter-spacing: .22em; font-weight: 500; color: var(--rp-ink-2);
  font-size: clamp(14px, 2.1vh, 19px); line-height: 1.3; margin: 0 auto clamp(18px, 3vh, 30px);
}
.recorder-panel h1 { font-size: clamp(26px, 3.4vh, 38px); font-weight: 600; letter-spacing: -.01em; text-align: center; margin: 0 0 8px; color: var(--rp-ink); }
.recorder-panel .rp-sub { text-align: center; color: var(--rp-muted); margin: 0 0 clamp(22px, 4vh, 38px); font-size: clamp(15px, 2.1vh, 19px); }
.recorder-panel .rp-empty { text-align: center; color: var(--rp-muted); font-size: 17px; }

.recorder-panel .rp-roster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 180px)); gap: clamp(14px, 2vw, 22px);
  justify-content: center; align-content: safe center; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 8px 12px;
}
.recorder-panel .rp-tile {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(20px, 3vh, 30px) 12px; border: 1px solid var(--rp-line); border-radius: 0;
  background: #fff; cursor: pointer; font: inherit; color: var(--rp-ink);
  transition: border-color .12s ease, transform .06s ease;
}
.recorder-panel .rp-tile:hover, .recorder-panel .rp-tile:focus-visible { border-color: var(--rp-salmon); outline: none; }
.recorder-panel .rp-tile:active { transform: scale(.98); }
.recorder-panel .rp-tile .rp-avatar { width: clamp(60px, 8.4vh, 78px); height: clamp(60px, 8.4vh, 78px); font-size: clamp(20px, 3vh, 26px); }
.recorder-panel .rp-nm { font-weight: 600; font-size: clamp(15px, 2.1vh, 19px); text-align: center; line-height: 1.2; letter-spacing: .01em; }
.recorder-panel .rp-tag { margin-top: -8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-salmon); }

.recorder-panel .rp-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid var(--rp-ink); border-radius: 0; background: transparent; color: var(--rp-ink);
  font-weight: 600; letter-spacing: .06em;
}

.recorder-panel .rp-back {
  position: absolute; top: clamp(18px, 3vh, 34px); left: clamp(18px, 3vw, 40px);
  border: none; background: none; color: var(--rp-muted); font: inherit; font-size: 16px; letter-spacing: .04em;
  cursor: pointer; padding: 8px 12px;
}
.recorder-panel .rp-back:active { background: #f2f1ec; }
.recorder-panel .rp-pin-wrap { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); width: 100%; max-width: 1120px; }
.recorder-panel .rp-who { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 12px); }
.recorder-panel .rp-who .rp-avatar { width: clamp(58px, 8.6vh, 88px); height: clamp(58px, 8.6vh, 88px); font-size: clamp(22px, 3.2vh, 30px); }
.recorder-panel .rp-pin-view h1 { font-size: clamp(23px, 3.2vh, 34px); margin: 0; }
.recorder-panel .rp-pin-entry { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 380px; }
.recorder-panel .rp-pin-entry .rp-sub { margin: 0 0 clamp(6px, 1.2vh, 14px); }
@media (orientation: portrait) {
  .recorder-panel .rp-pin-wrap { flex-direction: column; gap: clamp(10px, 2vh, 22px); max-width: 560px; }
}

.recorder-panel .rp-dots { display: flex; gap: clamp(14px, 2vh, 20px); justify-content: center; margin: clamp(10px, 2vh, 20px) 0 4px; }
.recorder-panel .rp-dots span {
  width: clamp(15px, 2vh, 19px); height: clamp(15px, 2vh, 19px); border-radius: 0;
  border: 1px solid var(--rp-ink); background: transparent; transition: all .12s ease;
}
.recorder-panel .rp-dots span.on { background: var(--rp-salmon); border-color: var(--rp-salmon); }
.recorder-panel .rp-dots.bad span { border-color: var(--rp-salmon); background: var(--rp-salmon); }
.recorder-panel .rp-dots.shake { animation: rp-shake .4s; }
@keyframes rp-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.recorder-panel .rp-pin-error { min-height: 20px; text-align: center; color: var(--rp-salmon-dark); font-size: 14px; font-weight: 600; letter-spacing: .01em; margin: 2px 0 clamp(8px, 1.6vh, 16px); max-width: 320px; }

.recorder-panel .rp-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vh, 16px); width: 100%; max-width: clamp(300px, 40vh, 400px); }
.recorder-panel .rp-key {
  height: clamp(56px, 10vh, 92px); border-radius: 0; border: 1px solid var(--rp-ink); background: #fff;
  font: inherit; font-size: clamp(22px, 3.2vh, 30px); font-weight: 600; color: var(--rp-ink); cursor: pointer;
  transition: transform .05s ease, background .12s ease;
}
.recorder-panel .rp-key:active { transform: scale(.96); background: var(--rp-salmon-soft); }
.recorder-panel .rp-key-ghost { border-color: var(--rp-line); font-size: clamp(13px, 2vh, 16px); color: var(--rp-muted); text-transform: lowercase; letter-spacing: .05em; }

.recorder-panel .rp-busy { position: fixed; inset: 0; background: rgba(255, 255, 255, .72); display: flex; align-items: center; justify-content: center; }
.recorder-panel .rp-spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--rp-line); border-top-color: var(--rp-salmon); animation: rp-spin .7s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }

.recorder-panel .rp-foot { flex: none; width: 100%; text-align: center; color: var(--rp-muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 0 16px; }