/* The station's link to its player tablet: one bar in the signing section, live while the player fills it in. */
.reception-tablet-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
}

.reception-tablet-bar[hidden] {
  display: none;
}

.reception-tablet-bar p {
  flex: 1;
  min-width: 220px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-silver-200);
}

.reception-tablet-bar .reception-tablet-notice {
  flex-basis: 100%;
  font-weight: 550;
  color: var(--color-caution);
}

.reception-tablet-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-silver-400);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.reception-tablet-bar[data-mode="tablet"],
.reception-tablet-bar[data-mode="done"] {
  border-color: color-mix(in srgb, var(--color-felt) 55%, var(--color-line));
  background: color-mix(in srgb, var(--color-felt) 9%, var(--color-surface));
}

.reception-tablet-bar[data-mode="tablet"] .reception-tablet-icon,
.reception-tablet-bar[data-mode="done"] .reception-tablet-icon {
  stroke: var(--color-felt);
}

.reception-signing[data-tablet="active"] > .reception-signing-games,
.reception-signing[data-tablet="active"] > .reception-signing-list,
.reception-signing[data-tablet="active"] > .reception-signature {
  opacity: .88;
}

/* Pairing the tablet in Reception → Nastavení. */
.reception-tablet-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-weight: 550;
  color: var(--color-silver-200);
}

.reception-tablet-state::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-silver-600);
}

.reception-tablet-state[data-state="online"]::before {
  background: var(--color-felt);
}

.reception-tablet-state[data-state="offline"]::before,
.reception-tablet-state[data-state="waiting"]::before {
  background: var(--color-caution);
}

.reception-tablet-code {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-well);
}

.reception-tablet-code[hidden] {
  display: none;
}

.reception-tablet-qr {
  width: 168px;
  height: 168px;
  border-radius: 8px;
  background: var(--color-paper);
}

.reception-tablet-code-text {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--color-silver-300);
}

.reception-tablet-url {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-silver-200);
  overflow-wrap: anywhere;
}

.reception-tablet-code-value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-silver-100);
}

.reception-tablet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.reception-tablet-message {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-silver-300);
}

.reception-tablet-message:empty {
  display: none;
}

.reception-tablet-warning {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 550;
  color: var(--color-caution);
}

@media (max-width: 560px) {
  .reception-tablet-code {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

/* The player's tablet: a welcome screen, the documents to sign with large touch targets, and a thank-you. */
html:has(> body.player-tablet-page) {
  overscroll-behavior: none;
}

.player-tablet-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overscroll-behavior: none;
  background: var(--color-ink);
  color: var(--color-silver-100);
  font-family: var(--font-sans);
}

.player-tablet-idle,
.player-tablet-done,
.player-tablet-notice,
.player-tablet-pairing {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 24px;
  text-align: center;
}

.player-tablet-idle[hidden],
.player-tablet-done[hidden],
.player-tablet-notice[hidden],
.player-tablet-signing[hidden] {
  display: none;
}

.player-tablet-idle h1,
.player-tablet-done h1,
.player-tablet-notice h1 {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.player-tablet-idle p,
.player-tablet-done p,
.player-tablet-notice p {
  max-width: 34ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-silver-400);
}

.player-tablet-mark {
  width: 64px;
  height: auto;
  margin-bottom: 8px;
}

.player-tablet-check {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-felt) 18%, transparent);
}

.player-tablet-check svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--color-felt);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player-tablet-offline {
  position: fixed;
  inset: 0 0 auto;
  z-index: 5;
  padding: 12px 20px;
  background: var(--color-caution);
  color: var(--color-ink);
  font-weight: 650;
  text-align: center;
}

.player-tablet-offline[hidden] {
  display: none;
}

.player-tablet-signing {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 28px 0;
}

.player-tablet-head {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.player-tablet-head p:first-child {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-silver-400);
}

.player-tablet-head h1 {
  font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.player-tablet-lead {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-silver-300);
}

.player-tablet .reception-signing {
  gap: 22px;
}

.player-tablet .reception-signing-header > div,
.player-tablet .reception-signing-header:not(:has(.badge-caution)) {
  display: none;
}

.player-tablet .reception-signing-check-text,
.player-tablet .reception-signing-statement,
.player-tablet .reception-signing-option,
.player-tablet .reception-limit-name,
.player-tablet .reception-segmented span {
  font-size: 17px;
}

.player-tablet .reception-signing-check-text strong,
.player-tablet .reception-signing-item legend strong {
  font-size: 18px;
}

.player-tablet .reception-signing-check {
  min-height: 56px;
}

.player-tablet .reception-signing-check input,
.player-tablet .reception-signing-option input,
.player-tablet .reception-limit-refuse input {
  width: 28px;
  height: 28px;
}

.player-tablet .reception-limit-row {
  grid-template-columns: minmax(0, 1fr) 12rem auto;
  padding: 12px 0;
}

.player-tablet .reception-limit-row .field {
  min-height: 52px;
  font-size: 19px;
}

.player-tablet .reception-signing-body {
  font-size: 16px;
  line-height: 1.6;
}

.player-tablet .reception-signature-pad {
  height: 280px;
}

.player-tablet-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
  padding: 16px 0 calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-ink) 94%, transparent);
  backdrop-filter: blur(6px);
}

.player-tablet-progress {
  flex: 1;
  min-width: 240px;
  font-size: 16px;
  color: var(--color-silver-300);
}

.player-tablet-progress[data-retry="true"] {
  color: var(--color-caution);
}

.player-tablet-finish {
  min-height: 60px;
  padding: 0 28px;
  font-size: 19px;
}

.player-tablet-pairing h1 {
  font-size: 34px;
  font-weight: 700;
}

.player-tablet-pairing > p {
  max-width: 44ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-silver-400);
}

.player-tablet-pairing form {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  margin-top: 10px;
  text-align: left;
}

.player-tablet-code {
  min-height: 60px;
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.player-tablet-pair {
  min-height: 56px;
  font-size: 18px;
}

.player-tablet-error {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--color-alarm) 50%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-alarm) 10%, transparent);
  color: var(--color-silver-100);
}

@media (max-width: 640px) {
  .player-tablet-signing {
    padding: 22px 16px 0;
  }

  .player-tablet .reception-limit-row {
    grid-template-columns: minmax(0, 1fr);
  }
}