/* Estúdio de uma ferramenta: Bancada em duas colunas (canvas à esquerda, inspetor à direita). Só variáveis de token.
   Os blocos "version-row", "quality-*", "advanced", "palette" e "inline-swatch" são compartilhados com a biblioteca e as tarefas (views.js). */

/* Cabeçalho da ferramenta */
.studio-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--spacingL);margin-bottom:var(--spacingXL)}
.studio-head-text{min-width:0;display:flex;flex-direction:column;gap:var(--spacingXS)}
.studio-head h1{font:var(--typeTitle3)}
.studio-head p{max-width:72ch;color:var(--colorNeutralForeground3)}
.studio-head-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingS)}

/* Bancada: conteúdo flexível + inspetor; empilha no celular */
.studio-bench{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--spacingXL)}
.studio-canvas{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:var(--spacingM)}
.studio-panel{flex:1 1 340px;max-width:420px;min-width:0;display:flex;flex-direction:column;gap:var(--spacingL);padding:var(--spacingXL)}
.studio-panel .section-heading{margin-bottom:0}
.studio-panel .pill-row .status-label{max-width:100%;white-space:normal;border-radius:var(--borderRadiusMedium)}
.studio-panel-note{margin-top:calc(var(--spacingS) * -1)}
.studio-form{display:flex;flex-direction:column;gap:var(--spacingL);min-width:0}
.studio-generate{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.studio-generate .notice{margin:0}
.studio-generate small{overflow-wrap:anywhere}
.studio-section-title{font:var(--typeBody1Strong);color:var(--colorNeutralForeground1)}
.studio-params{display:flex;flex-direction:column;gap:var(--spacingM)}
.studio-actions{display:flex;flex-direction:column;gap:var(--spacingS)}

/* Método e perfil */
.studio-method-note{display:flex;flex-direction:column;gap:var(--spacingS)}
.studio-profile h3{margin:var(--spacingL) 0 var(--spacingXS);font:var(--typeBody1Strong);color:var(--colorNeutralForeground2)}
.studio-profile h3:first-child{margin-top:0}
.studio-profile-card{display:flex;flex-direction:column;gap:var(--spacingM)}
.studio-profile-card > p{color:var(--colorNeutralForeground2)}
.studio-list{display:flex;flex-direction:column;gap:var(--spacingXXS);font:var(--typeCaption1);color:var(--colorNeutralForeground2)}
.studio-method-list{display:flex;flex-direction:column;gap:var(--spacingS)}
.studio-method{display:flex;flex-direction:column;gap:var(--spacingXS);padding:var(--spacingS) var(--spacingM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground2);font:var(--typeCaption1)}
.studio-method small{color:var(--colorNeutralForeground3)}
.studio-method-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingXS)}

/* Entrada: biblioteca, envio, amostra */
.studio-slot{display:flex;flex-direction:column;gap:var(--spacingS);min-width:0;margin:0;padding:0;border:0}
.studio-slot legend{padding:0;margin-bottom:var(--spacingXS)}
.studio-modes{display:flex}
.studio-modes > button{flex:1 1 auto}
.studio-chosen{display:flex;align-items:center;gap:var(--spacingM);padding:var(--spacingS);border:var(--strokeWidthThin) solid var(--colorBrandStroke1);border-radius:var(--borderRadiusMedium);background:var(--colorBrandBackground2)}
.studio-chosen > div{flex:1;min-width:0}
.studio-chosen strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-thumb{width:44px;height:44px;flex:none;object-fit:contain;border-radius:var(--borderRadiusSmall)}
.studio-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacingS)}
.studio-sample{display:flex;align-items:center;gap:var(--spacingS);min-width:0;padding:var(--spacingXS);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);text-align:left;cursor:pointer}
.studio-sample:hover:not(:disabled){background:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover)}
.studio-sample:disabled{cursor:not-allowed;color:var(--colorNeutralForegroundDisabled)}
.studio-sample > span{min-width:0}
.studio-sample strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--typeCaption1Strong)}
.studio-sample small{display:block;font:var(--typeCaption2);color:var(--colorNeutralForeground3)}

/* Cotação */
.studio-quote{display:flex;flex-direction:column;gap:var(--spacingXS);padding:var(--spacingM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground2)}
.studio-quote.prepared{border-color:var(--colorBrandStroke1);background:var(--colorBrandBackground2)}
.studio-quote.expired,.studio-quote.used{border-color:var(--colorStatusWarningBorder1);background:var(--colorStatusWarningBackground1)}
.studio-quote-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--spacingS)}
.studio-quote-line > span{display:inline-flex;align-items:center;gap:var(--spacingS);color:var(--colorNeutralForeground2)}
.studio-quote-line strong{font:var(--typeSubtitle2);text-align:right}

/* Faixa da tarefa */
.studio-job{align-items:flex-start;flex-wrap:wrap}
.studio-job:focus-visible{outline-offset:2px}
.studio-job-body{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:var(--spacingXS)}
.studio-job-body .mono{overflow-wrap:anywhere}
.studio-job-error{font-weight:var(--fontWeightSemibold);color:var(--colorStatusDangerForeground1)}
.studio-job-actions{margin-left:auto}
.studio-job-link{display:inline-flex;align-items:center;gap:var(--spacingXXS);white-space:nowrap}
.studio-job > .studio-job-link{margin-left:auto}

/* Palco */
.studio-view{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.studio-tabs{display:flex;flex-wrap:wrap;gap:var(--spacingXS);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.studio-tabs > button{position:relative;min-height:40px;padding:0 var(--spacingMNudge);border:0;background:transparent;color:var(--colorNeutralForeground2);font:var(--typeBody1);cursor:pointer;white-space:nowrap}
.studio-tabs > button:hover{color:var(--colorNeutralForeground2Hover);background:var(--colorSubtleBackgroundHover)}
.studio-tabs > button[aria-selected="true"]{color:var(--colorNeutralForeground1);font-weight:var(--fontWeightSemibold)}
.studio-tabs > button[aria-selected="true"]::after{content:"";position:absolute;left:var(--spacingMNudge);right:var(--spacingMNudge);bottom:0;height:3px;border-radius:var(--borderRadiusCircular);background:var(--colorCompoundBrandStroke)}
#studio-panel{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
#studio-panel:focus-visible{outline-offset:4px}
.studio-figure{display:flex;flex-direction:column;gap:var(--spacingXS);min-width:0}
.studio-figure > h3{font:var(--typeBody1Strong);color:var(--colorNeutralForeground2)}
.studio-stage{position:relative;height:clamp(300px,52vh,520px);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);overflow:hidden;isolation:isolate}
.studio-stage.empty{display:flex;align-items:center;justify-content:center;height:auto;min-height:300px}
.studio-stage.empty .empty-result{max-width:340px}
.studio-scroll{position:absolute;inset:0;display:flex;overflow:auto}
.studio-img{flex:none;margin:auto;image-rendering:pixelated}
.studio-stage.fit .studio-img{width:100%;height:100%;margin:0;object-fit:contain}
.studio-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--spacingM);font:var(--typeCaption1);color:var(--colorNeutralForeground3)}
.studio-caption .mono{font-size:12px}
.studio-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacingS)}
.studio-zoom{min-width:56px;text-align:center;font-size:12px}
.studio-compare-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacingM)}
.studio-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacingM)}
.studio-compare-grid .studio-stage{height:clamp(240px,40vh,380px)}

/* Revisar e exportar */
.studio-export{display:flex;flex-direction:column;gap:var(--spacingM)}
.studio-export .section-heading{margin-bottom:0}
.studio-export h3{font:var(--typeBody1Strong);margin-bottom:var(--spacingXS)}
.studio-export > p{color:var(--colorNeutralForeground2)}
.studio-review-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacingXL)}
.studio-review-columns > div{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.studio-export pre{max-width:100%;margin:0;padding:var(--spacingM);overflow:auto;border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground2);font:12px/18px var(--fontFamilyMonospace);white-space:pre-wrap;overflow-wrap:anywhere}

/* Faixa de versões, detalhes e qualidade (abaixo do palco) */
.studio-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--spacingXL)}
.studio-strip-item{display:flex;flex-direction:column;gap:var(--spacingS);min-width:0}
.studio-strip-item .section-heading{margin-bottom:0}
.studio-strip-item .section-heading h2{font:var(--typeBody1Strong)}
.studio-strip-item .field-help .icon{width:16px;height:16px}
.studio-versions{display:flex;flex-direction:column;gap:var(--spacingXS)}

/* Telas estreitas */
@media (max-width:760px){
  .studio-panel{max-width:none;flex-basis:100%;padding:var(--spacingL)}
  .studio-compare-controls,.studio-compare-grid,.studio-review-columns{grid-template-columns:minmax(0,1fr)}
  .studio-samples{grid-template-columns:minmax(0,1fr)}
  .studio-stage{height:clamp(240px,45vh,380px)}
  .studio-toolbar > .field-help{display:none}
  .studio-job-actions{margin-left:0}
  .studio-tabs > button{flex:1 1 auto;min-height:44px}
}