/* Progressive enhancement: only the installed workspace changes panel behavior. */
.diagram-page .catalog-workspace{--catalog-workspace-top:90px;--catalog-workspace-image-chrome:160px;align-items:start}
.catalog-workspace>.catalog-workspace-tabs[hidden],.catalog-workspace>.image-panel[hidden],.catalog-workspace>.parts-panel[hidden]{display:none!important}
.catalog-workspace-tabs{display:none}
.catalog-workspace>.image-panel,.catalog-workspace>.parts-panel{min-width:0;scroll-margin-top:calc(var(--catalog-workspace-top) + 64px)}
/* Let the page scroll through the complete parts list, keeping its diagram beside it. */
.diagram-page .catalog-workspace>.parts-panel .table-wrap{max-height:none;overflow:visible}
.diagram-page .catalog-workspace>.parts-panel th{top:var(--catalog-workspace-top)}
@media(min-width:1051px){
  .diagram-page .catalog-workspace>.image-panel{position:sticky;top:var(--catalog-workspace-top)}
  .diagram-page .catalog-workspace>.image-panel .diagram-image{height:clamp(280px,calc(100vh - var(--catalog-workspace-top) - var(--catalog-workspace-image-chrome) - 20px),850px);height:clamp(280px,calc(100dvh - var(--catalog-workspace-top) - var(--catalog-workspace-image-chrome) - 20px),850px);min-height:0;overflow:hidden;padding:clamp(12px,1.3vw,24px)}
  .diagram-page .catalog-workspace>.image-panel .diagram-image>button,.diagram-page .catalog-workspace>.image-panel .diagram-image>.catalog-hotspot-image{width:100%;height:100%;max-width:100%;max-height:100%;min-height:0}
  .diagram-page .catalog-workspace>.image-panel .diagram-image.catalog-label-image-frame{height:auto;min-height:240px;overflow:visible}
  .diagram-page .catalog-workspace .catalog-hotspot-tools>button{min-height:44px;touch-action:manipulation}
}
/* Definite image boxes keep original width/height attributes from overflowing
   the desktop grid when a reviewed hotspot wrapper is installed. */
@media screen and (min-width:1051px){
  .diagram-page .catalog-workspace>.image-panel .diagram-image:not(.catalog-label-image-frame) .diagram-zoom-trigger{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .diagram-page .catalog-workspace>.image-panel .diagram-image:not(.catalog-label-image-frame) img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
}
@media(max-width:1050px){
  .diagram-page .catalog-workspace.catalog-workspace-mobile{grid-template-columns:minmax(0,1fr);gap:0}
  .catalog-workspace-mobile>.catalog-workspace-tabs{position:sticky;top:calc(var(--catalog-workspace-top) - 12px);z-index:9;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;margin-bottom:14px;border:1px solid var(--line,#d8e3e3);border-radius:8px;background:#eff5f5;box-shadow:0 4px 14px #0b252c0d;scroll-margin-top:var(--catalog-workspace-top)}
  .catalog-workspace-tab{appearance:none;box-sizing:border-box;min-height:48px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted,#58737c);font:700 16px/1.25 'Barlow',Arial,sans-serif;padding:11px 16px;touch-action:manipulation}
  .catalog-workspace-tab[aria-selected=true]{border-color:#c9dfdf;background:#fff;color:var(--ink,#0b252c);box-shadow:0 1px 4px #0b252c12}
  .catalog-workspace-tab:focus-visible,.catalog-workspace-mobile>[role=tabpanel]:focus-visible{outline:3px solid var(--accent,#087e8a);outline-offset:3px}
  .catalog-workspace-mobile>.image-panel{position:static}
  .diagram-page .catalog-workspace-mobile>.image-panel .diagram-image{height:auto;min-height:260px;overflow:visible;padding:16px}
  .diagram-page .catalog-workspace-mobile>.image-panel .diagram-image img{max-width:100%;height:auto;max-height:none}
  .diagram-page .catalog-workspace-mobile>.parts-panel th{top:calc(var(--catalog-workspace-top) + 63px)}
  .catalog-workspace-mobile .panel-actions{gap:14px;flex-wrap:wrap}
  .catalog-workspace-mobile .panel-actions button,.catalog-workspace-mobile .panel-actions a,.catalog-workspace-mobile .catalog-hotspot-tools>button{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;touch-action:manipulation}
}
@media(prefers-reduced-motion:reduce){.catalog-workspace,.catalog-workspace *{scroll-behavior:auto!important}}
@media print{
  .catalog-workspace>.catalog-workspace-tabs{display:none!important}
  .catalog-workspace>.image-panel[hidden],.catalog-workspace>.parts-panel[hidden]{display:block!important}
  .diagram-page .catalog-workspace>.image-panel{position:static}
  .diagram-page .catalog-workspace>.image-panel .diagram-image{height:auto;min-height:0;overflow:visible}
  .diagram-page .catalog-workspace>.parts-panel th{position:static}
}