*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --page-width: 794px;
  --page-height: 1123px;          /* A4 portrait: 794 x 1.4142 */
  --page-margin-top: 15px;
  --page-bg: #FFFFFF;
  --page-outline: #C5C7C5;
  --canvas-bg: #F9FAFD;
  --ink: #1b1b18;
  --muted: #6f6a60;
  --accent: #cf4636;
}

html, body {
  min-width: calc(var(--page-width) + 40px);
  min-height: 100%;
  background-color: var(--canvas-bg);
  font-family: Arial, sans-serif;
  color: var(--ink);
}

#canvas {
  width: 100%;
  min-height: 100vh;
  background-color: var(--canvas-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--page-margin-top);
  padding-bottom: 40px;
}

#page {
  width: var(--page-width);
  min-height: var(--page-height);
  background-color: var(--page-bg);
  outline: 1px solid var(--page-outline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#content { padding: 45px; }

h1 { font-size: 15px; font-weight: bold; margin: 0; text-transform: uppercase; }
.subtitle { font-size: 11pt; font-weight: normal; margin: 3px 0 22px; color: #000000; }

/* One 360 photo block: viewer, then filename, then description. */
.photo { margin: 0 0 28px; }

.viewer {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--page-outline);
}

/* Hide the device-orientation (motion) button so tapping it never triggers the
   "would like to access motion and orientation" permission prompt on mobile. */
.pnlm-orientation-button { display: none !important; }

/* Touch devices (iPhone, iPad, Android): hide all on-screen controls — no
   fullscreen button, no zoom (pinch-to-zoom + drag is cleaner). any-pointer
   (not pointer) so it matches iPad, which reports a FINE pointer under
   desktop-class browsing. Desktop keeps zoom + fullscreen. */
@media (any-pointer: coarse) {
  .pnlm-controls-container { display: none !important; }
}

/* Desktop native fullscreen: make the viewer fill the screen. */
.viewer:fullscreen,
.viewer:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border: none;
}

/* Optional Google Doc content, between the subtitle and the gallery. */
#doc { font-size: 11pt; line-height: 1.6; color: #000000; }
#doc:not(:empty) { margin-bottom: 22px; }
#doc h1, #doc h2, #doc h3 { font-size: 11pt; font-weight: bold; margin: 16px 0 6px; text-transform: none; }
#doc p { margin: 0 0 10px; }
#doc ul, #doc ol { margin: 0 0 10px; padding-left: 22px; }
#doc .doc-loading { color: var(--muted); font-style: italic; }

/* Row under the photo: filename on the left, download button on the right. */
.photo-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; }
.name { font-size: 8pt; font-weight: normal; color: #999999; margin: 0; min-width: 0; }

/* Full-width description, below the row. */
.description { font-size: 11pt; line-height: 1.5; color: #000000; margin: 6px 0 0; white-space: pre-wrap; }

/* Download-current-view button (Material Symbols icon), matches standplaats actions. */
.download-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--muted);
}
.download-btn:hover { color: var(--ink); }
.download-btn .material-symbols-outlined { font-size: 22px; line-height: 1; }

.status { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* iPad mini and smaller: drop the "sheet on a canvas" look — plain white
   page, small margin, full width, no forced min-width (no h-scroll).
   Distinguisher is the device's SHORTER side: iPad mini = 768, iPad Pro 11" =
   834, so the 768 threshold keeps the Pro on the full "page" design.
   - (max-width: 768px)            → portrait phones/tablets + narrow windows
   - coarse pointer + height ≤ 768 → landscape touch devices (iPad mini, phones)
     but NOT iPad Pro (height 834) and NOT laptops (fine pointer). */
@media (max-width: 768px), (pointer: coarse) and (max-height: 768px) {
  html, body {
    min-width: 0;
    background-color: var(--page-bg);
  }
  #canvas {
    padding: 0;
    background-color: var(--page-bg);
  }
  #page {
    width: 100%;
    min-height: 100vh;
    outline: none;
    box-shadow: none;
  }
  #content { padding: 16px; }
}