@import url('/assets/standard-page-heroes.css?v=1');
@import url('/assets/specialized-application-consistency.css?v=1');

/*
  Shared proportions for the four core editor workspaces only.
  Specialized application pages own their own layout geometry.
*/
:root{
  --hc-compose-track:minmax(0,1.22fr);
  --hc-preview-track:minmax(360px,.78fr);
  --hc-workspace-gap:24px;
}

:where(
  .picker-workspace,
  .palette-workspace,
  .gradient-workspace,
  .workspace
){
  display:grid;
  grid-template-columns:var(--hc-compose-track) var(--hc-preview-track)!important;
  gap:var(--hc-workspace-gap)!important;
  align-items:start!important;
}

:where(
  .picker-workspace,
  .palette-workspace,
  .gradient-workspace,
  .workspace
)>*{
  min-width:0;
}

/* Give the dedicated editors enough horizontal room before stacking. */
:where(.picker-main,.lab-main,.gradient-shell,.studio-main){
  width:min(1400px,100%);
}

/* The preview supports the task instead of visually overpowering it. */
@media(min-width:981px){
  :where(.picker-preview,.palette-preview,.gradient-canvas-panel,.workspace>.preview-panel){
    position:sticky;
    top:92px;
    align-self:start;
  }
  .gradient-preview{min-height:480px!important}
  .workspace>.preview-panel{min-height:420px!important}
  .picker-compose .stage{min-height:400px!important}
}

:where(.picker-compose,.picker-preview,.palette-compose,.palette-preview){
  gap:18px;
}

@media(max-width:1180px) and (min-width:981px){
  :root{
    --hc-compose-track:minmax(0,1.16fr);
    --hc-preview-track:minmax(330px,.84fr);
    --hc-workspace-gap:18px;
  }
}

@media(max-width:980px){
  :where(
    .picker-workspace,
    .palette-workspace,
    .gradient-workspace,
    .workspace
  ){
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  :where(.picker-preview,.palette-preview,.gradient-canvas-panel,.workspace>.preview-panel){
    position:static!important;
  }
}

@media(max-width:620px){
  :root{--hc-workspace-gap:12px}
}