/* Phone layouts are scoped to the interface. Book page styles also serve PDF export. */
.mobile-page-tools { display: none; }

@media (min-width: 701px) and (max-width: 1100px) and (min-height: 541px) {
  #studio { --studio-sidebar: clamp(312px, 42vw, 390px); }
  #studio .preview-top { visibility: hidden; }
  #studio .canvas-bottom-dock { left: calc(var(--studio-sidebar) + 8px); right: 8px; gap: 6px; }
  #studio .canvas-browsing-tools { gap: 5px; }
  #studio .canvas-bottom-dock :is(.canvas-text-tools, .preview-navigation, .canvas-zoom-tools) { padding: 2px; }
  #studio .canvas-bottom-dock .preview-navigation span { min-width: 0; max-width: 70px; line-height: 1.2; }
  #studio .canvas-bottom-dock button { min-height: 44px; }
}

@media (max-width: 700px), (max-width: 950px) and (orientation: landscape) and (max-height: 540px) {
  :root { --phone-gutter: clamp(12px, 4vw, 24px); }
  .site-header.details-navigation {
    padding: calc(8px + env(safe-area-inset-top)) var(--phone-gutter) 8px;
    min-height: calc(60px + env(safe-area-inset-top));
  }
  body { padding-top: calc(68px + env(safe-area-inset-top)); }
  #home :is(section[id], footer) { scroll-margin-top: calc(68px + env(safe-area-inset-top)); }
  .header-menu { max-height: calc(100dvh - 80px - env(safe-area-inset-top)); overflow: auto; }
  .header-menu :is(a, button), .details-navigation .wordmark { min-height: 44px; }
  #home .hero { height: auto; min-height: calc(100svh - 68px - env(safe-area-inset-top)); }
  #home .memory-gallery { gap: var(--space-2); padding: var(--space-2) var(--phone-gutter) 0; }
  #home .memory-caption { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #home .memory-caption > span { grid-column: 1 / -1; }
  #home .hero-copy { padding-inline: var(--phone-gutter); }
  #home .hero-copy > .button { justify-self: stretch; }
  #home .hero h1 { overflow-wrap: anywhere; }
  #home .section { padding-inline: var(--phone-gutter); }
  #home .visual-how .how-card { padding: var(--space-4); }
  #home .faq-item summary, #home .faq-list summary { min-height: 44px; align-content: center; }

  /* The card stays still while the content and form fields scroll. */
  .guided-flow { padding: max(8px, env(safe-area-inset-top)) var(--phone-gutter) calc(56px + env(safe-area-inset-bottom)); }
  .guided-flow[data-phase] .flow-card {
    height: min(720px, calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height: 0; padding: var(--space-4); width: min(100%, 35rem);
  }
  .guided-flow .flow-card header { margin-bottom: var(--space-3); }
  .guided-flow .flow-card footer { flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); }
  .guided-flow .flow-card footer:has(#flow-skip-upload:not([hidden]) + #flow-next:not([hidden])) #flow-next { flex: 1 0 100%; }
  .guided-flow #flow-skip-upload { flex: 1; min-width: 0; max-width: none; }
  .guided-flow #flow-back { flex: none; }
  .guided-flow #flow-content { overscroll-behavior: contain; }
  .guided-flow .size-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guided-flow .size-card strong { white-space: normal; }
  .flow-motion-toggle { bottom: calc(6px + env(safe-area-inset-bottom)); min-height: 44px; }
  .guided-flow :is(input:not([type=checkbox]), select, textarea),
  #studio .controls :is(input:not([type=checkbox],[type=range],[type=color]), select, textarea),
  body dialog.ui-dialog :is(input:not([type=checkbox],[type=range],[type=color]), select, textarea) { font-size: 16px; }
  body dialog.ui-dialog { max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); }

  /* Give the canvas a real place in the layout. Only the inspector scrolls. */
  #studio { --mobile-book-height: clamp(116px, 26dvh, 230px); padding: 0; }
  body:has(#studio:not([hidden])) .studio-layout { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
  #studio .editor-tools { position: static; flex: none; height: auto; min-height: 52px; padding-top: max(3px, env(safe-area-inset-top)); }
  #studio .editor-home { width: 40px; }
  #studio .editor-tool-list [data-editor-tool] { min-height: 46px; font-size: var(--type-small); }
  body:has(#studio:not([hidden])) .preview-area {
    position: relative; order: -1; top: auto; height: auto; width: 100%; flex: none; margin: 0; padding: 0; box-shadow: none;
  }
  #studio .preview-area .canvas-actions {
    position: relative; inset: auto; transform: none; order: -1; flex-wrap: wrap; justify-content: center;
    max-width: calc(100% - 16px); margin: 6px auto 0; padding: 3px; gap: 2px;
  }
  #studio .canvas-actions .order-price-note { position: static; flex: 1 0 100%; text-align: center; }
  #studio .preview-area #book-preview,
  #studio .preview-area:has(.canvas-text-tools:not([hidden])) #book-preview {
    flex: none; height: var(--mobile-book-height); min-height: 0; padding: 6px 12px; margin: 0;
  }
  #studio #book-preview > .cover {
    width: min(70%, calc((var(--mobile-book-height) - 12px) * var(--book-ratio, 1)));
    max-height: calc(var(--mobile-book-height) - 12px);
  }
  #studio #book-preview > .spread { width: min(100%, calc((var(--mobile-book-height) - 12px) * 2 * var(--book-ratio, 1))); }
  #studio .canvas-bottom-dock { position: relative; inset: auto; order: 1; margin: 0 8px 6px; justify-content: space-between; gap: 4px; }
  #studio .canvas-bottom-dock :is(.canvas-text-tools, .preview-navigation, .canvas-zoom-tools) { padding: 0 2px; }
  #studio .canvas-bottom-dock button { min-height: 44px; }
  #studio .canvas-bottom-dock .preview-navigation button { width: 40px; }
  #studio .canvas-bottom-dock .preview-navigation span { min-width: 0; max-width: 68px; line-height: 1.2; }
  #studio .canvas-zoom-tools button { min-width: 36px; }
  #studio .canvas-browsing-tools { margin-left: auto; }
  #studio .page-filmstrip {
    position: relative; inset: auto; order: 2; display: grid;
    grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px;
    padding: 3px 8px; background: var(--surface-panel); backdrop-filter: none;
  }
  #studio .filmstrip-hint { display: none; }
  #studio #page-thumbnails { min-width: 0; padding-block: 5px; }
  #studio #page-thumbnails .page-thumbnail { display: flex; flex-direction: column; align-items: center; }
  #studio #page-thumbnails .thumbnail-number { margin-top: 4px; font-size: .6875rem; line-height: 1.1; }
  #studio .page-management { display: none; grid-column: 1 / -1; margin: 0; }
  #studio .mobile-page-tools {
    display: block; grid-row: 2; min-height: 44px; max-width: 60px; padding: 6px;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
    background: var(--surface-raised); color: var(--text-primary); font-size: var(--type-small);
  }
  #studio .mobile-page-tools[aria-expanded=true] { border-color: var(--border-strong); background: var(--surface-hover); }
  #studio .mobile-page-tools[aria-expanded=true] + .page-management { display: flex; }
  #studio #page-thumbnails { grid-row: 2; grid-column: 2; }
  #studio .page-management :is(button, select) { min-height: 44px; }
  #studio .page-management select { max-width: 100%; font-size: 16px; }
  #studio .controls, #studio.is-reviewing .controls {
    width: 100%; min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain;
    padding: var(--space-4) var(--phone-gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
    scroll-padding-block: var(--space-4);
  }
  #studio:has(#photos-panel.is-selecting-photos:not([hidden])) .controls { min-height: 0; }
  #studio .photo-selection-actions { top: 0; }

  #studio > .local-save-status { bottom: max(8px, env(safe-area-inset-bottom)); }
  body .cover-text-toolbar { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .photo-action-toolbar { flex-wrap: wrap; max-width: calc(100vw - 24px); }
  .photo-action-toolbar button { min-height: 44px; }
}

@media (max-width: 360px) {
  #studio .canvas-actions .history-button { min-width: 40px; justify-content: center; }
  #studio .canvas-actions .history-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #studio .canvas-bottom-dock .preview-navigation button { width: 36px; }
  #studio .canvas-bottom-dock .preview-navigation span { max-width: 46px; }
}

/* Very short portrait screens can scroll the workspace when tools take extra rows. */
@media (max-width: 700px) and (max-height: 650px) and (orientation: portrait) {
  body:has(#studio:not([hidden])) #studio:not(.is-reviewing) .studio-layout { height: auto; overflow: visible; }
  #studio:not(.is-reviewing) .controls { min-height: 260px; }
}

@media (max-width: 700px) and (max-height: 650px), (max-width: 950px) and (orientation: landscape) and (max-height: 540px) {
  .guided-flow[data-phase=photos] #flow-content > h1 { font-size: clamp(1.3rem, 5vw, 1.6rem); margin-block: 0 6px; }
  .guided-flow[data-phase=photos] #flow-content > .muted { font-size: var(--type-control); margin-block: 0 8px; }
  .guided-flow .flow-save-status { margin-top: var(--space-2); padding-top: var(--space-2); }
}

@media (max-width: 950px) and (orientation: landscape) and (max-height: 540px) {
  .site-header.details-navigation { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  #studio { --filmstrip-page-height: 44px; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  body:has(#studio:not([hidden])) #studio:not(.is-reviewing) .studio-layout {
    display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  }
  #studio:not(.is-reviewing) .editor-tools {
    grid-column: 1 / -1; grid-row: 1; inset: auto; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: 3px 8px;
  }
  #studio .editor-tool-list { flex-direction: row; justify-content: center; overflow: visible; }
  #studio .editor-tool-list [data-editor-tool] { width: auto; padding-inline: 12px; }
  #studio .editor-home, #studio .editor-tools .editor-account { margin: 0; }
  #studio:not(.is-reviewing) .controls { grid-column: 1; grid-row: 2; height: 100%; border-radius: 0; }
  body:has(#studio:not([hidden])) #studio:not(.is-reviewing) .preview-area {
    grid-column: 2; grid-row: 2; height: 100%; overflow-y: auto;
  }
  #studio .preview-top { display: none; }
  #studio .preview-area button.change-cover.ui-button.ui-button { display: none; }
  #studio .canvas-bottom-dock { flex-wrap: wrap; }
  #studio:has(#photos-panel.is-selecting-photos:not([hidden])) .controls { grid-column: 1 / -1; }
  .guided-flow[data-phase] .flow-card { min-height: 0; }
}