/* Access-only components. Loaded between app.css and experience.css; scoped
 * specificity keeps these form rules independent of the photo/camera flow. */
.experience-body .shell.access-shell .public-content {
  align-items: center;
  justify-content: center;
  padding-block: 8px;
}

.experience-body .access-shell .access-card {
  background: rgba(255, 253, 247, .88);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(17, 51, 38, .045);
  display: grid;
  gap: clamp(16px, 2.8dvh, 24px);
  margin: 0;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 3.4dvh, 32px);
  scrollbar-width: none;
  text-align: center;
  width: min(100%, 540px);
}

.experience-body .access-shell .access-card::-webkit-scrollbar { display: none; }

.experience-body .access-shell .access-heading,
.experience-body .access-shell .access-body-content,
.experience-body .access-shell .access-form,
.experience-body .access-shell .access-field {
  min-width: 0;
}

.experience-body .access-shell .access-heading h1 {
  font-size: clamp(1.65rem, 4.6dvh, 2.75rem);
  letter-spacing: -.055em;
  line-height: 1.08;
  margin: 0;
  overflow-wrap: anywhere;
}

.experience-body .access-shell .access-heading .eyebrow {
  font-size: .68rem;
  line-height: 1.3;
  margin: 0 0 9px;
}

.experience-body .access-shell .access-intro,
.experience-body .access-shell .access-copy {
  color: #52655b;
  font-size: clamp(.9rem, 2dvh, 1rem);
  line-height: 1.45;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}

.experience-body .access-shell .access-body-content {
  align-content: center;
  display: grid;
  gap: 14px;
}

.experience-body .access-shell .access-body-content > p { margin: 0; }

.experience-body .access-shell .access-form {
  display: grid;
  gap: 14px;
  margin: 0;
}

.experience-body .access-shell .access-field {
  display: grid;
  gap: 7px;
  text-align: left;
}

.experience-body .access-shell .access-field label {
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
}

.experience-body .access-shell .access-field input {
  appearance: none;
  background: var(--paper);
  border: 1px solid #a7b9ac;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.25;
  min-height: 48px;
  min-width: 0;
  padding: 12px 14px;
  width: 100%;
}

.experience-body .access-shell .access-field input::placeholder { color: #738177; opacity: 1; }

.experience-body .access-shell .access-submit {
  border-radius: 14px;
  font-size: .95rem;
  font-weight: 600;
  gap: 8px;
  line-height: 1.3;
  margin: 0;
  min-height: 48px;
  min-width: 0;
  padding: 11px 16px;
  text-align: center;
  white-space: normal;
  width: 100%;
}

.experience-body .access-shell .access-submit:hover { transform: none; }

.experience-body .access-shell .access-field input:focus-visible,
.experience-body .access-shell .access-submit:focus-visible,
.experience-body .access-shell .access-text-link:focus-visible {
  outline: 3px solid #719d43;
  outline-offset: 3px;
}

.experience-body .access-shell .access-submit:disabled {
  cursor: wait;
  opacity: .62;
}

.experience-body .access-shell .access-note {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}

.experience-body .access-shell .access-scenario {
  margin-top: 12px;
}

.experience-body .access-shell .access-text-link {
  align-items: center;
  display: inline-flex;
  font-size: .86rem;
  justify-content: center;
  line-height: 1.4;
  min-height: 44px;
  text-underline-offset: 3px;
}

.experience-body .access-shell .access-error {
  background: #fff0e9;
  border: 1px solid #edd2c4;
  border-radius: 12px;
  color: #8d311c;
  font-size: .86rem;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  position: static;
  text-align: left;
  transform: none;
  width: 100%;
}

/* The viewport script accounts for browser chrome and a software keyboard.
 * The access script applies the same short-layout class when only the visual
 * viewport changes, without changing any camera/result CSS. */
.experience-body .access-shell.access-short .access-card {
  border-radius: 18px;
  gap: 12px;
  padding: 16px;
}
.experience-body .access-shell.access-short .access-heading h1 { font-size: 1.55rem; }
.experience-body .access-shell.access-short .access-heading .eyebrow { margin-bottom: 5px; }
.experience-body .access-shell.access-short .access-intro,
.experience-body .access-shell.access-short .access-copy { font-size: .84rem; line-height: 1.35; margin-top: 7px; }
.experience-body .access-shell.access-short .access-form,
.experience-body .access-shell.access-short .access-body-content { gap: 10px; }
.experience-body .access-shell.access-short .access-note { font-size: .74rem; }

.experience-body .shell.access-shell.access-two-column .access-card {
  align-items: center;
  column-gap: clamp(18px, 4vw, 36px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(100%, 880px);
}
.experience-body .shell.access-shell.access-two-column .access-heading { grid-column: 1; grid-row: 1; }
.experience-body .shell.access-shell.access-two-column .access-body-content { grid-column: 2; grid-row: 1; }
.experience-body .shell.access-shell.access-two-column .access-card > .access-error { grid-column: 1; grid-row: 2; }
.experience-body .shell.access-shell.access-two-column .access-card:has(> .access-error:not([hidden])) .access-body-content { grid-row: 1 / span 2; }
.experience-body .shell.access-shell.access-two-column .access-card:has(> .access-error:not([hidden])) .access-heading .eyebrow,
.experience-body .shell.access-shell.access-two-column .access-card:has(> .access-error:not([hidden])) .access-intro { display: none; }
.experience-body .shell.access-shell.access-tight .access-secondary-copy { display: none; }

.experience-body .shell.access-shell.access-keyboard {
  --experience-header-height: 40px;
  --experience-footer-height: 22px;
}
.experience-body .shell.access-shell.access-keyboard .public-header .brand-system { height: 34px; width: 100px; }
.experience-body .shell.access-shell.access-keyboard .access-card { gap: 10px; padding: 12px; }
.experience-body .shell.access-shell.access-keyboard .access-heading .eyebrow,
.experience-body .shell.access-shell.access-keyboard .access-secondary-copy { display: none; }
.experience-body .shell.access-shell.access-keyboard .access-intro { display: none; }
.experience-body .shell.access-shell.access-keyboard .access-heading h1 { font-size: 1.35rem; }
.experience-body .shell.access-shell.access-keyboard .access-field { gap: 4px; }
.experience-body .shell.access-shell.access-keyboard .access-submit,
.experience-body .shell.access-shell.access-keyboard .access-field input { min-height: 44px; padding-block: 10px; }
.experience-body .shell.access-shell.access-keyboard .access-error { font-size: .8rem; padding: 7px 9px; }
.experience-body .shell.access-shell.access-keyboard:has(.access-card > .access-error:not([hidden])) {
  --experience-footer-height: 0px;
}
.experience-body .shell.access-shell.access-keyboard .access-card:has(> .access-error:not([hidden])) .access-heading,
.experience-body .shell.access-shell.access-keyboard:has(.access-card > .access-error:not([hidden])) .public-footer { display: none; }
.experience-body .shell.access-shell.access-keyboard.access-tight {
  --experience-header-height: 34px;
  --experience-footer-height: 0px;
}
.experience-body .shell.access-shell.access-keyboard.access-tight .public-footer { display: none; }
.experience-body .shell.access-shell.access-keyboard.access-tight .public-header .brand-system { height: 28px; }

@media (max-height: 520px) {
  .experience-body .access-shell .access-card { border-radius: 18px; gap: 12px; padding: 16px; }
  .experience-body .access-shell .access-heading h1 { font-size: 1.55rem; }
  .experience-body .access-shell .access-heading .eyebrow { margin-bottom: 5px; }
  .experience-body .access-shell .access-intro,
  .experience-body .access-shell .access-copy { font-size: .84rem; line-height: 1.35; margin-top: 7px; }
  .experience-body .access-shell .access-form,
  .experience-body .access-shell .access-body-content { gap: 10px; }
  .experience-body .access-shell .access-note { font-size: .74rem; }
}

@media (min-width: 550px) and (max-height: 520px) {
  .experience-body .access-shell .access-card {
    align-items: center;
    column-gap: clamp(18px, 4vw, 36px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(100%, 880px);
  }
  .experience-body .access-shell .access-heading { grid-column: 1; grid-row: 1; }
  .experience-body .access-shell .access-body-content { grid-column: 2; grid-row: 1; }
  .experience-body .access-shell .access-card > .access-error { grid-column: 1; grid-row: 2; }
  .experience-body .access-shell .access-card:has(> .access-error:not([hidden])) .access-body-content { grid-row: 1 / span 2; }
  .experience-body .access-shell .access-card:has(> .access-error:not([hidden])) .access-heading .eyebrow,
  .experience-body .access-shell .access-card:has(> .access-error:not([hidden])) .access-intro { display: none; }
}

@media (max-height: 300px) {
  .experience-body .access-shell .access-secondary-copy { display: none; }
}

/* Recovery and pause explain the separate right to manage existing photos.
 * Keep that copy visible even in a short landscape viewport. */
@media (min-width: 550px) and (max-height: 360px) {
  .experience-body .shell.access-shell .access-card { gap: 8px; padding: 12px; }
  .experience-body .shell.access-shell .access-form,
  .experience-body .shell.access-shell .access-body-content { gap: 8px; }
  .experience-body .shell.access-shell .access-field { gap: 4px; }
  .experience-body .shell.access-shell .access-field input,
  .experience-body .shell.access-shell .access-submit { min-height: 44px; padding-block: 10px; }
  .experience-body .shell.access-shell .access-note { font-size: .72rem; line-height: 1.32; }
}

@media (max-width: 480px) and (max-height: 700px) {
  .experience-body .access-shell .access-card:has(> .access-error:not([hidden])) .access-intro { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-body .access-shell .access-submit { transition: none; }
}