/* Three original-size cards, two original gaps, original insets and panel rule.
   The measured scrollbar gutter is added separately rather than shrinking cards. */
.editor-shell{
  --catalog-columns:3;
  --catalog-card:153.5px;
  --catalog-gap:8px;
  --catalog-inset:12px;
  --catalog-scrollbar:0px;
  --catalog-width:calc(var(--catalog-columns)*var(--catalog-card) + (var(--catalog-columns) - 1)*var(--catalog-gap) + 2*var(--catalog-inset) + 1px + var(--catalog-scrollbar));
  grid-template-columns:var(--catalog-width) minmax(0,1fr);
}
.editor-shell.panel-closed{grid-template-columns:0 minmax(0,1fr)}
.stamp-panel .panel-heading{flex-shrink:0}
.stamp-panel .selection-dock{padding-bottom:12px}
.stamp-panel #stampDescription{font:12px/1.55 Arial,Helvetica,sans-serif;margin:0 0 12px;color:var(--muted)}
.stamp-panel .category-controls{border-bottom:1px solid var(--rule);flex-shrink:0;margin:0;padding-top:12px}
.stamp-panel .category-controls select{font:12px var(--mono)}
.stamp-panel .touch-palette{display:block;position:relative;padding:0 var(--catalog-inset) 18px;scrollbar-gutter:stable;touch-action:pan-y;overscroll-behavior:contain}
.catalog-section{margin-top:22px}
.catalog-heading{font:10px/1.5 var(--mono);letter-spacing:.7px;text-transform:uppercase;border-top:1px solid var(--rule);padding:13px 0 12px;margin:0}
.catalog-grid{display:grid;grid-template-columns:repeat(var(--catalog-columns),var(--catalog-card));gap:var(--catalog-gap);align-items:start}
.catalog-grid .stamp-choice{width:var(--catalog-card);min-height:128px}
@media(min-width:2500px){
  .editor-shell{--catalog-card:193.5px}
  .catalog-grid .stamp-choice{min-height:155px}
  .stamp-panel #stampDescription{font-size:15px}
  .catalog-heading{font-size:12px}
}
@media(max-width:1200px){.editor-shell{--catalog-columns:2}}
@media(max-width:760px){
  .editor-shell,.editor-shell.panel-closed{grid-template-columns:0 minmax(0,1fr)}
  .stamp-panel{width:var(--catalog-width);max-width:100vw}
  .stamp-panel .selection-dock{padding:12px}
}
@media(max-width:374px){
  .editor-shell{--catalog-columns:1}
  .stamp-panel{width:100vw}
  .catalog-grid{justify-content:center}
}

/* Accurate variant artwork; the main catalog cards retain their original sizes. */
.stamp-panel .orientations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.stamp-panel .orientations[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.stamp-panel .orientation{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:72px;padding:4px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.stamp-panel .orientation svg{width:100%;height:62px;pointer-events:none}
.stamp-panel .orientation:hover{border-color:var(--ink)}
.stamp-panel .orientation:active{background:var(--soft)}
.stamp-panel .orientation[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--soft);color:var(--ink);--paper:var(--soft)}
.editor-page .canvas-caption #selectedStatus{min-width:0}
.editor-page .canvas-caption #selectedStatus span{background:none;padding:0}
.editor-page #statusInstruction{color:var(--muted)}
.editor-page #statusInstruction:not([hidden])::before{content:' — '}
.editor-page .editor-bottom{bottom:calc(45px + var(--status-extra,0px))}
@media(min-width:2500px){.stamp-panel .orientation{min-height:86px}.stamp-panel .orientation svg{height:76px}}
@media(max-width:760px){.stamp-panel .orientations{grid-template-columns:repeat(2,minmax(0,1fr))}}