.phone-fallback { display: none; }
/* Full-width, readable fallback instead of a scaled gallery panel. */
@media (max-width: 800px) {
  html.public-app, .public-app body { width: 100%; min-width: 0; height: auto; overflow: auto; }
  .public-app body > :not(.phone-fallback) { display: none !important; }
  .public-app .phone-fallback { display: block; box-sizing: border-box; width: 100%; padding: 32px 24px; min-height: 100svh; font: 20px/1.6 var(--sans); overflow-wrap: anywhere; }
  .phone-fallback h1 { font: 36px/1.2 var(--display); }
  .phone-fallback a { display: inline-block; padding: 12px 0; color: var(--gold); }
  .public-app, .public-app * { cursor: auto; }
}

.public-app button:focus-visible, .public-app a:focus-visible, .public-app [tabindex]:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.public-app .web-reader-controls { display:flex; flex-wrap:wrap; gap:8px; }
.public-app .web-reader-controls button, .public-app .web-reader-controls a, .public-app .web-retry { min-height:44px; padding:10px; font-size:16px; }
@media (min-width:801px) { .public-app #viewer { max-width:none; width:100%; } }
.public-app #saver button.pulse { font:inherit; color:inherit; background:transparent; border:0; cursor:pointer; }

/* v50: opt-in public phone readers only; kiosk and gallery rules above stay intact. */
@media (max-width: 800px) {
  .phone-station-active body { background: var(--bg); color: var(--ink); }
  .public-app .phone-fallback[hidden], .phone-station [hidden] { display: none !important; }
  .public-app .phone-station { padding: 24px 20px; max-width: 760px; margin: 0 auto; font: 18px/1.6 var(--sans); }
  .phone-station, .phone-station * { box-sizing: border-box; min-width: 0; max-width: 100%; }
  .phone-station { color-scheme: dark; }
  [data-theme="light"] .phone-station { color-scheme: light; }
  .phone-station h1 { font: 36px/1.2 var(--display); margin: 0 0 24px; }
  .phone-station h2 { font: 28px/1.3 var(--display); margin: 20px 0 12px; }
  .phone-station p, .phone-station figcaption { font-size: 18px; margin: 12px 0; }
  .phone-station button, .phone-station a { min-width: 44px; min-height: 44px; font: inherit; }
  .phone-station button { display: block; width: 100%; text-align: start; padding: 14px; margin: 12px 0; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); color: var(--ink); }
  .phone-station a { display: block; padding: 12px; color: var(--gold); }
  .phone-station :is(button, a, audio, video, [tabindex]):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  .phone-track, .phone-photo, .phone-media { padding: 16px; margin: 24px 0; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); }
  .phone-station img { display: block; width: 100%; height: auto; object-fit: contain; }
  .phone-track img { max-height: 240px; }
  .phone-station audio, .phone-station video { pointer-events: auto; display: block; width: 100%; min-height: 54px; }
  .phone-catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
  .phone-photo { margin: 0; padding: 8px; }
  .phone-photo img { max-height: 320px; }
  .phone-body { white-space: pre-line; font-size: 18px; }
  .phone-station, .phone-station * { user-select: text; -webkit-user-select: text; touch-action: auto; overflow-wrap: anywhere; }
  /* Static art remains visible in Lite. No animations or automatic playback. */
  html[data-perf="lite"] .phone-station img { display: block; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .phone-station-active, .phone-station-active body { scroll-behavior: auto; }
  .phone-station, .phone-station * { animation: none !important; transition: none !important; }
}