/* Touch describes the input, not the amount of usable screen space.
   Keep the phone gestures; give tablets their own workspace proportions. */
@media (min-width:640px) and (pointer:coarse), (min-width:640px) and (max-width:900px) {
 body:not(.landing) { --header-height:72px; }
 body:not(.landing) .app-header {
  height:var(--header-height); display:grid; grid-template-columns:44px minmax(0,1fr) 88px;
  grid-template-rows:44px; align-content:center; gap:16px; padding:0 20px;
 }
 body:not(.landing) .app-header #allModules { grid-area:1 / 1; }
 body:not(.landing) .app-header #homeLink { grid-area:1 / 2; justify-self:start; }
 body:not(.landing) .app-header .brand-logo { width:180px; }
 body:not(.landing) .app-header .header-experience-tools { grid-area:1 / 3; width:88px; margin:0; justify-self:end; }
 body:not(.landing) #experienceMain { height:calc(100dvh - var(--header-height)); }

 /* Dialogs fit the screen, with one scrolling body and a reachable action row. */
 body.quote-open[data-panel=configure]:not(.landing):not(.panel-closed) #sidePanel { display:none; }
 #quoteDialog {
  inset:0; margin:auto; width:min(720px,calc(100vw - 48px)); max-width:none;
  height:min(840px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); border-radius:24px;
 }
 #quoteDialog .document-bar { padding:16px 24px; }
 #quoteDialog .quote-content { padding:0 24px; }
 #quoteForm .quote-fields { gap:14px 16px; }
 #quoteForm .quote-fields label { font-size:12px; }
 #quoteForm .quote-fields input { min-height:48px; }
 #quoteForm .quote-fields textarea { min-height:80px; }
 .quote-privacy label { font-size:12px; }
 .quote-submit-row { padding-block:16px; }
 .quote-submit-row button { font-size:13px; }
 #documentDialog { width:min(960px,calc(100vw - 40px)); height:calc(100dvh - 40px); max-height:calc(100dvh - 40px); margin:auto; border-radius:24px; }

 /* A room picker should leave the model visible, even on a large touch screen. */
 body[data-panel=explore]:not(.landing):not(.panel-closed) #sidePanel {
  inset:68px auto auto 16px; width:320px; max-width:calc(100% - 32px);
  max-height:calc(100% - 172px); border-radius:22px;
 }
 #tour { max-width:min(520px,calc(100% - 32px)); }
 .museum-detail dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Portrait and split view retain the lower sheet, with consistent margins. */
@media (min-width:640px) and (orientation:portrait) and (pointer:coarse), (min-width:640px) and (max-width:900px) and (min-height:600px) {
 body[data-panel=configure]:not(.panel-closed):not(.landing) #sidePanel {
  left:12px; right:12px; width:auto; bottom:12px; max-height:min(50dvh,calc(100% - 300px));
 }
 body[data-panel=configure]:not(.panel-closed):not(.landing) #viewport {
  left:12px; right:12px; top:12px; bottom:auto; width:auto;
  height:calc(100% - var(--active-panel-height,0px) - 36px)!important; min-height:240px; border-radius:24px;
 }
 body.configuration-collapsed[data-panel=configure]:not(.panel-closed):not(.landing) #viewport { height:calc(100% - 24px)!important; }
 body.exploded-open.material-detail-open #viewport { inset:12px 12px calc(50% + 24px)!important; }
 body.exploded-open #materialMuseum { inset:auto 12px 12px; width:auto; height:50%; }
}

/* Landscape tablets: the scene and the choices stay side by side. */
@media (min-width:960px) and (min-height:600px) and (orientation:landscape) and (pointer:coarse) {
 body { --tablet-panel-width:clamp(340px,34vw,420px); }
 body:not(.landing) .app-header { grid-template-columns:44px auto minmax(0,1fr) 88px; }
 body:not(.landing) .app-header .project-title { display:flex; grid-area:1 / 3; min-width:0; }
 body:not(.landing) .app-header .project-title strong { font-size:14px; }
 body:not(.landing) .app-header .header-experience-tools { grid-area:1 / 4; }
 body[data-panel=configure]:not(.panel-closed):not(.landing) #sidePanel {
  inset:12px 12px 12px auto; width:var(--tablet-panel-width); height:auto; max-height:none; border-radius:24px;
 }
 body[data-panel=configure]:not(.panel-closed):not(.landing) #viewport {
  inset:12px calc(var(--tablet-panel-width) + 24px) 12px 12px;
  width:auto; height:auto!important; min-height:0; border-radius:24px;
 }
 body.configuration-collapsed[data-panel=configure]:not(.panel-closed):not(.landing) #viewport { inset:12px; height:auto!important; }
 body[data-panel=configure]:not(.panel-closed):not(.configuration-collapsed):not(.landing):not(.exploded-open) #viewport .mode-tabs { display:grid!important; }
 #reopenConfigPanel {
  left:auto; right:12px; top:50%; bottom:auto; transform:translateY(-50%);
  flex-direction:column; gap:10px; padding:14px 10px; border-radius:16px 0 0 16px;
 }
 #reopenConfigPanel span { writing-mode:vertical-rl; }
 #reopenConfigPanel svg { transform:none; }
 #toggleConfigPanel svg { transform:rotate(-90deg); }
 body.exploded-open #viewport { inset:12px!important; border-radius:24px; }
 body.exploded-open.material-detail-open #viewport { inset:12px calc(var(--tablet-panel-width) + 24px) 12px 12px!important; }
 body.exploded-open #materialMuseum { inset:12px 12px 12px auto; width:var(--tablet-panel-width); height:auto; }
}

/* The catalogue is readable on an iPad in portrait and in split view. */
@media (min-width:640px) and (max-width:1023px) {
 .catalog-hero-picture { inset:auto 0 0; height:auto; aspect-ratio:2045 / 769; mask-image:linear-gradient(to bottom,transparent,#000 15%); }
 .catalog-hero-art { object-fit:cover; }
 #catalog .catalog-product h3 { font-size:23px; }
 #catalog .catalog-product-copy { inset-inline:14px; }
 #catalog .catalog-product-link { padding-inline:12px; gap:8px; font-size:13px; }
 #catalog .catalog-grid { gap:14px; }
}
@media (min-width:640px) and (max-width:1100px) and (orientation:portrait) {
 #modulePicker { width:min(880px,calc(100vw - 40px)); padding:24px; }
 .module-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .module-option img { aspect-ratio:2; }
 .module-option-copy { padding:16px; }
 .module-option-description { margin-bottom:8px; }
}

/* Landscape leaves less vertical space: tighten gaps, not the touch controls. */
@media (min-width:640px) and (min-height:600px) and (max-height:900px) and (pointer:coarse) {
 #quoteDialog .document-bar { padding-block:12px; }
 #quoteDialog .quote-summary { padding-block:8px; margin-bottom:12px; }
 #quoteDialog #quotePriceSummary { margin-top:12px; }
 #quoteDialog #quotePriceSummary details { padding-top:4px; }
 #quoteDialog #quotePriceSummary summary { min-height:44px; }
 #quoteDialog .quote-form-body { padding-bottom:12px; }
 #quoteForm .quote-fields { gap:10px 16px; }
 #quoteForm .quote-fields input { min-height:44px; }
 #quoteForm .quote-fields textarea { min-height:58px; }
 #quoteDialog .quote-submit-row { padding-block:12px; }
}