/* Reception's player screens open as full pages under the station bar, with a way back instead of a floating window. */
dialog.reception-dialog.reception-page[open] {
  position: fixed;
  inset: var(--reception-page-top) 0 0;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-ink);
  box-shadow: none;
  scroll-padding-top: 120px;
  animation: reception-page-in 160ms ease-out;
}

html.touch-keyboard-open dialog.reception-dialog.reception-page[open] {
  bottom: var(--touch-keyboard-height);
}

.reception-page {
  --reception-page-top: 0px;
  --page-min: 40px;
  --page-edge: max(var(--page-min), calc((100% - 1840px) / 2));
  --page-gutter: var(--page-edge);
}

.reception-page::backdrop {
  background: transparent;
  backdrop-filter: none;
}

.reception-page[data-mode="check-in"], .reception-page[data-mode="departure"] {
  --page-gutter: max(var(--page-min), calc((100% - 1440px) / 2));
}

.reception-page[data-mode="detail"]:is(
  [data-card-state="inventory_card"],
  [data-card-state="invalid_card"],
  [data-card-state="revoked_card"],
  [data-card-state="loan_card_available"],
  [data-card-state="conflicting_card"]
) {
  --page-gutter: max(var(--page-min), calc((100% - 760px) / 2));
}

.reception-page .reception-dialog-header {
  justify-content: flex-start;
  gap: 24px;
  padding: 16px var(--page-edge);
  background: color-mix(in srgb, var(--color-ink) 92%, transparent);
  backdrop-filter: blur(8px);
}

.reception-page .reception-dialog-body {
  padding: 28px var(--page-gutter) 40px;
}

.reception-page [data-reception-target="queued"] {
  margin: 20px var(--page-gutter) 0;
}

.reception-page .reception-discard {
  padding: 20px var(--page-gutter);
}

.reception-page :is([data-reception-editor-target="panel"], [data-reception-target="profile"] > .reception-quick-form) {
  max-width: none;
}

.reception-page [data-reception-check-in-target="close"] {
  display: none;
}

.reception-page-back {
  flex-shrink: 0;
  gap: 8px;
  min-height: 56px;
  padding-inline: 16px 24px;
}

.reception-page-heading {
  min-width: 0;
}

.reception-page-title {
  margin-top: 2px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@keyframes reception-page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.reception-dialog.reception-page[open] {
    animation: none;
  }
}

.reception-page .reception-profile-header {
  gap: 28px;
}

.reception-page .reception-profile-header .reception-avatar {
  width: 112px;
  height: 136px;
}

.reception-overview {
  display: grid;
  gap: 0 56px;
}

.reception-page .reception-overview dl.grid {
  font-size: 1rem;
}

.reception-page .reception-profile-limits h4 {
  color: var(--color-silver-100);
  font-size: 1.25rem;
  font-weight: 650;
}

.reception-page .reception-profile-limits dl > div {
  padding: 14px 0;
  font-size: 1rem;
}

.reception-page :is(.reception-check-in-actions, .reception-present-actions) {
  background: var(--color-ink);
}

.reception-check-in-birth-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.reception-check-in-age:not(:empty)::before {
  content: "·";
  margin: 0 .5em;
  color: var(--color-silver-500);
}

.reception-check-in-age {
  color: var(--color-silver-300);
}

.reception-check-in-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 20px;
}

.reception-check-in-facts[hidden] {
  display: none;
}

.reception-check-in-fact {
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
}

.reception-check-in-fact dt {
  color: var(--color-silver-500);
  font-size: .8rem;
}

.reception-check-in-fact dd {
  margin-top: 4px;
  color: var(--color-silver-100);
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.reception-check-in-fact dd span {
  display: block;
  margin-top: 2px;
  color: var(--color-silver-400);
  font-size: .85rem;
  font-weight: 400;
}

.reception-check-in-fact[data-tone="caution"] dd {
  color: var(--color-caution);
}

.reception-check-in-fact[data-tone="alarm"] dd, .reception-check-in-fact[data-tone="alarm"] dd span {
  color: var(--color-alarm);
}

@media (min-width: 900px) {
  .reception-page .reception-check-in-person {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .reception-page .reception-check-in-portrait {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .reception-page .reception-check-in-name {
    margin-top: 6px;
    font-size: 2.75rem;
    line-height: 1.1;
  }

  .reception-page .reception-check-in-birth strong, .reception-page .reception-check-in-age {
    font-size: 1.25rem;
  }

  .reception-page .reception-check-in-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
  }

  .reception-page .reception-check-in-fact dd {
    font-size: 1.2rem;
  }

  .reception-page :is(.reception-access-allow, .reception-access-deny) {
    min-height: 76px;
    font-size: 1.2rem;
  }

  .reception-dialog.reception-page[data-presence="present"] .reception-check-in-person {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .reception-dialog.reception-page[data-presence="present"] .reception-check-in-portrait {
    height: 288px;
  }
}

@media (min-width: 1200px) {
  .reception-overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .reception-overview-limits .reception-profile-limits {
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 640px) {
  .reception-page {
    --page-min: 16px;
  }

  .reception-page .reception-dialog-header {
    gap: 14px;
  }

  .reception-page-title {
    font-size: 1.2rem;
  }

  .reception-page .reception-profile-header {
    flex-wrap: wrap;
    gap: 16px;
  }

  .reception-page .reception-profile-header .reception-avatar {
    width: 76px;
    height: 92px;
  }
}

/* The player editor fills the page: fields take as many columns as fit, the internal note comes last, saving stays at the bottom. */
.reception-editor-section {
  min-width: 0;
  container-type: inline-size;
}

.reception-editor-legend {
  margin-bottom: 16px;
  color: var(--color-silver-100);
  font-size: 1.15rem;
  font-weight: 650;
}

.reception-quick-form > .reception-editor-section > .reception-editor-legend,
.reception-quick-form > .reception-editor-fold > .reception-editor-legend {
  width: 100%;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}

.reception-editor-legend ~ .hint {
  margin-top: -8px;
}

.reception-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 20px;
}

@container (min-width: 560px) {
  .reception-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reception-editor-grid > [data-span="2"] {
    grid-column: span 2;
  }
}

@container (min-width: 900px) {
  .reception-editor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 1200px) {
  .reception-editor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.reception-editor-fold > summary.reception-editor-legend {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0;
}

.reception-editor-fold[open] > summary.reception-editor-legend {
  margin-bottom: 12px;
}

.reception-editor-grid .hint:empty {
  display: none;
}

/* The „Bez omezení“ box under the document expiry; while it is ticked the emptied date is locked. */
.reception-document-indefinite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 4px;
  color: var(--color-silver-300);
  font-size: 0.9rem;
  cursor: pointer;
}

.reception-document-indefinite input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--color-felt);
  cursor: pointer;
}

.reception-document-validity .field[readonly] {
  opacity: 0.45;
  cursor: not-allowed;
}

.reception-editor-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-ink) 94%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 -10px 18px -14px color-mix(in srgb, var(--color-shade) 45%, transparent);
}

.reception-editor-footer .registration-checklist {
  position: static;
  box-shadow: none;
}

.reception-editor-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.reception-editor-footer .reception-form-actions {
  padding: 0;
  border-top: 0;
}

.reception-editor-footer .reception-form-status {
  flex: 1;
  min-width: 240px;
}