/* Draw and paint studio, desktop (1000px and up only). Left rail: the picture library. Centre: the paper, as large as the screen allows.
   Right rail: colours, pencil size, undo / clear. Phone and tablet (<1000px) are untouched.
   The canvas is sized by CSS only (container units on .dpx-stage) and draw.js maps pointer positions with getBoundingClientRect on every event,
   so changing the layout cannot break drawing. The picture library stays inside .dpx-panel in the DOM; it is lifted into the left rail with absolute
   positioning against .dpx-main (the panel is not a positioned element, so the library is not clipped by the panel's scrolling). */
@media (min-width:1000px){
  .dpx-bar{padding:12px 28px;gap:12px;min-height:68px}
  .dpx-t b{font-size:21px}
  .dpx-t small{font-size:13px}
  .dpx-main{position:relative;--l:clamp(220px,19vw,300px);--r:clamp(270px,23vw,350px);grid-template-columns:var(--l) minmax(0,1fr) var(--r);grid-template-rows:minmax(0,1fr)}
  .dpx-stage{grid-column:2;grid-row:1;padding:24px 28px;background:radial-gradient(rgba(22,32,44,.06) 1px,transparent 1.3px) 0 0/20px 20px}
  .dpx-paper{border-color:rgba(22,32,44,.10);box-shadow:0 24px 60px -24px rgba(22,32,44,.35)}

  /* right rail */
  .dpx-panel{grid-column:3;grid-row:1;padding:24px 22px;gap:26px;background:#FBF9F4;border-left:1px solid rgba(22,32,44,.10)}
  .dpx-panel h3{margin-bottom:14px}
  .dpx-sw{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
  .dpx-c{width:100%;min-width:0;max-width:58px;justify-self:center}
  .dpx-tools{display:flex;flex-direction:column;gap:26px}
  .dpx-seg button{height:48px}
  .dpx-act .dpx-pill{height:48px}

  /* left rail: pictures */
  .dpx-pics{position:absolute;left:0;top:0;bottom:0;width:var(--l);overflow:auto;overscroll-behavior:contain;padding:24px 16px;background:#FBF9F4;border-right:1px solid rgba(22,32,44,.10)}
  .dpx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dpx-pic{border-radius:14px;border-color:rgba(22,32,44,.10);font-size:12.5px}
  .dpx-pic[aria-checked=true]{border-color:#145C63;box-shadow:0 0 0 1px #145C63}
  .dpx-more{display:none}
}
