/* Keep the workshop focused on choosing a form and decorating one canvas. */
#workshop [hidden]{display:none!important}
.catalog-label{font-size:10px;letter-spacing:.06em;color:var(--muted);margin:13px 0 7px}
.shape-template-grid,.pattern-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.shape-template-card,.pattern-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;border:1px solid #d5ddce;border-radius:3px;background:#f5f5eb;color:var(--green);padding:5px 2px;gap:3px}
.shape-template-card{min-height:76px}
.shape-template-card canvas{display:block;max-width:100%;width:64px;height:53px;object-fit:contain}
.shape-template-card span,.pattern-card span{font-size:10px;line-height:1.5;white-space:nowrap}
.shape-template-card[aria-pressed=true]{border-color:#799980;background:#e1e9d9;box-shadow:inset 0 0 0 1px #799980}
.simple-dimensions{margin-top:15px}
.simple-dimensions .atelier-control{margin-top:11px}
.size-details,.draw-disclosure,.more-disclosure{border-top:1px solid var(--line);margin-top:12px;padding-top:0}
.size-details summary,.draw-disclosure summary,.more-disclosure summary{padding:11px 1px;font-size:11px;line-height:1.5;color:var(--green);cursor:pointer}
.size-details summary:focus-visible,.draw-disclosure summary:focus-visible,.more-disclosure summary:focus-visible{outline:2px solid #b49b65;outline-offset:2px}
.size-details[open] summary,.draw-disclosure[open] summary,.more-disclosure[open] summary{padding-bottom:3px}
#shape-feedback:empty{display:none}
.variant-note{font-size:10px!important;margin-top:12px;line-height:1.8}
#custom-shape-note{background:#edf1e6;padding:8px 10px;margin:12px 0 0}
.pattern-gallery{margin:11px 0 12px;gap:4px}
.pattern-card{min-height:46px;padding:4px 2px;gap:1px}
.pattern-card canvas{display:block;width:70px;max-width:100%;height:25px;object-fit:contain}
.pattern-card span{font-size:9px}
#workshop .surface-label{margin:0 0 10px;font-size:11px}
#workshop .surface-label select{padding:6px 9px;font-size:11px}
#workshop #canvas-help{margin:7px 0 10px;font-size:10px;line-height:1.6}
.selection-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--green);min-height:32px}
.selection-actions{display:flex;gap:5px;flex:none}
.selection-actions button,.stroke-settings button,.layer-copy-face button{border:1px solid #cad4c2;background:#f6f7ed;color:var(--green);font-size:10px;line-height:1.5;padding:6px 9px;min-height:30px;border-radius:3px}
.selection-actions button:disabled,.stroke-settings button:disabled,.layer-copy-face button:disabled{opacity:.42;cursor:default}
.basic-stamp-controls .atelier-control{margin-top:10px}
.basic-stamp-controls .atelier-control label{font-size:11px;margin-bottom:4px}
#workshop #pattern-feedback{font-size:10px;line-height:1.7;margin:9px 0 0}
#pattern-feedback:empty{display:none}
.draw-disclosure .drawing-tools{margin:6px 0 10px}
.symmetric-draw{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--green);padding:10px 0 3px}
.symmetric-draw input{width:14px;height:14px;accent-color:var(--green)}
.stroke-settings .atelier-mini-grid{margin-top:10px;align-items:end}
.more-disclosure>.catalog-label{margin-top:12px}
#workshop .more-disclosure .layer-list{max-height:220px}
.layer-copy-face{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end;margin:12px 0 4px}
.layer-copy-face label{grid-column:1/-1;margin-bottom:-5px;font-size:10px;color:var(--muted)}
.layer-copy-face select{width:100%;min-width:0;border:1px solid var(--line);background:var(--paper);padding:7px 5px;color:var(--green);font-size:11px;border-radius:2px}
@media(min-width:1181px){#workshop .atelier-grid{grid-template-columns:260px minmax(310px,1fr) 310px}}
/* A texture canvas must stay fully visible on a phone, with ordinary page scrolling. */
@media(max-width:980px){
  html:has(#workshop){height:auto;overflow:visible}
  body:has(#workshop){display:block;height:auto;min-height:100dvh;overflow:visible}
  body:has(#workshop)>#main{display:block;flex:none;height:auto;overflow:visible}
  #workshop.workshop-page{display:block;flex:none;height:auto;min-height:0;overflow:visible}
  #workshop>.atelier-notice{max-height:none;overflow:visible}
  #workshop>.atelier-shell{flex:none;height:auto;min-height:0;max-height:none;overflow:visible}
  #workshop .atelier-grid{display:flex;flex:none;flex-direction:column;gap:12px;min-height:0;overflow:visible;align-items:start}
  #workshop .atelier-stage{order:0;flex:none;align-self:start;width:100%;height:280px}
  #workshop .atelier-left,#workshop .atelier-pattern{order:1;width:100%;height:auto;max-height:none;overflow:visible;grid-template-rows:auto auto auto}
  #workshop .atelier-panel-scroll{height:auto;max-height:none;overflow:visible}
  #workshop .atelier-pattern{container-type:normal}
  #workshop .atelier-pattern .surface-canvas-wrap{width:min(100%,420px);min-width:0;max-width:420px}
  #workshop .panel-scroll-hint{display:none}
  #workshop .atelier-savebar{position:static;flex:none;bottom:auto;margin:0}
  .shape-template-grid{gap:7px}
  .shape-template-card{min-height:86px}
  .shape-template-card canvas{width:72px;height:60px}
  .shape-template-card span{font-size:12px}
  .pattern-gallery{gap:6px}
  .pattern-card{min-height:53px}
  .pattern-card canvas{width:82px;height:29px}
  .pattern-card span{font-size:10px}
  .selection-actions button,.stroke-settings button,.layer-copy-face button{min-height:40px;font-size:12px}
  .size-details summary,.draw-disclosure summary,.more-disclosure summary{font-size:12px;padding:13px 1px}
  .symmetric-draw{font-size:12px}.symmetric-draw input{width:17px;height:17px}
  body:has(#workshop):has(dialog[open]){overflow:hidden}
}