/* Outfit Palette owns its workspace and preview geometry. */
.outfit-palette-page .application-main{
  width:min(1360px,calc(100% - 40px));
  padding-top:clamp(32px,4.5vw,58px);
}
.outfit-palette-page .tool-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
}
.outfit-palette-page .tool-intro>div:first-child{min-width:0}
.outfit-palette-page .tool-intro h1{max-width:860px}
.outfit-palette-page .tool-intro p{max-width:760px}
.outfit-palette-page .tool-intro-actions{justify-content:flex-end;align-self:end}

/* The controls support the result; they must not dominate the page. */
.outfit-palette-page .primary-outfit-grid{
  grid-template-columns:minmax(420px,.78fr) minmax(620px,1.22fr)!important;
  gap:20px!important;
  align-items:start!important;
}
.outfit-palette-page .primary-outfit-grid>.tool-card{min-width:0}
.outfit-palette-page .control-stack{align-content:start}
.outfit-palette-page .detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.outfit-palette-page .role-buttons{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}
.outfit-palette-page .role-buttons button{min-width:0;padding-inline:8px}
.outfit-palette-page .garment-sampler{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:14px;
  border:1px solid var(--app-line);
  border-radius:8px;
  background:var(--app-soft);
}
.outfit-palette-page .garment-stage{
  position:relative;
  display:grid;
  place-items:center;
  width:160px;
  height:160px;
  overflow:hidden;
  border:1px dashed #aeb7c4;
  border-radius:7px;
  background:#fff;
}
.outfit-palette-page .garment-stage canvas{display:block;max-width:100%;max-height:100%;cursor:crosshair}
.outfit-palette-page .garment-stage .sample-marker{pointer-events:none}
.outfit-palette-page .control-stack>.workflow-toolbar{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
.outfit-palette-page .control-stack>.workflow-toolbar>#regenerateButton{grid-column:1 / -1}
.outfit-palette-page .control-stack>.workflow-toolbar>:where(button,a){width:100%!important;min-width:0!important}

/* Give the result card enough room and let its own width choose the internal layout. */
.outfit-palette-page .outfit-result-card{
  min-width:0;
  container-type:inline-size;
}
.outfit-palette-page .outfit-result-card .result-head{align-items:flex-start}
.outfit-palette-page .outfit-result-card .result-head>div{min-width:0}
.outfit-palette-page .outfit-result-card .result-head h2{overflow-wrap:anywhere}
.outfit-palette-page .outfit-builder{
  display:grid!important;
  grid-template-columns:minmax(340px,1.12fr) minmax(280px,.88fr)!important;
  gap:16px!important;
  align-items:start!important;
}
.outfit-palette-page .outfit-builder>*{min-width:0}
.outfit-palette-page .outfit-preview{
  position:relative!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:12px!important;
  min-height:390px!important;
  overflow:hidden!important;
  border:1px solid #d8dde5!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#f8fafb,#eef2f5)!important;
  padding:14px!important;
  box-shadow:none!important;
}
.outfit-palette-page .outfit-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(17,24,39,.025) 1px,transparent 1px),linear-gradient(rgba(17,24,39,.025) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.outfit-palette-page .outfit-preview::after{display:none!important}
.outfit-palette-page .outfit-board{
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:minmax(120px,1.1fr) repeat(2,minmax(92px,1fr))!important;
  grid-template-rows:repeat(2,minmax(128px,1fr))!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  min-height:285px;
}
.outfit-palette-page .outfit-role-tile{
  position:relative;
  display:grid;
  align-content:end;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.14);
  border-radius:7px;
  padding:11px;
  background:#d0d5dd;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.outfit-palette-page .outfit-role-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(135deg,rgba(255,255,255,.2),transparent 48%,rgba(0,0,0,.09));
  pointer-events:none;
}
.outfit-palette-page .outfit-role-tile>span,
.outfit-palette-page .outfit-role-tile>code{
  position:relative;
  z-index:1;
  display:block;
  width:max-content;
  max-width:100%;
  overflow:hidden;
  border-radius:4px;
  background:rgba(255,255,255,.92);
  padding:3px 6px;
  color:#111827;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.outfit-palette-page .outfit-role-tile>span{font-size:.6rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.outfit-palette-page .outfit-role-tile>code{margin-top:5px;font:750 .65rem "Space Mono",monospace}
.outfit-palette-page .outfit-role-outerwear{grid-column:1;grid-row:1 / 3;background:var(--outfit-outerwear,#4b5563)}
.outfit-palette-page .outfit-role-top{grid-column:2;grid-row:1;background:var(--outfit-top,#1b8e2d)}
.outfit-palette-page .outfit-role-bottom{grid-column:3;grid-row:1;background:var(--outfit-bottom,#20262f)}
.outfit-palette-page .outfit-role-footwear{grid-column:2;grid-row:2;background:var(--outfit-footwear,#20262f)}
.outfit-palette-page .outfit-role-accessory{grid-column:3;grid-row:2;background:var(--outfit-accessory,#b85f45)}
.outfit-palette-page .outfit-caption{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  margin:0!important;
  border:1px solid #d8dde5!important;
  border-radius:5px!important;
  background:#fff!important;
  padding:10px 12px!important;
  color:#344054!important;
  box-shadow:none!important;
  font-size:.68rem!important;
  line-height:1.48!important;
}
.outfit-palette-page .role-editor{display:grid;gap:8px;align-content:start}
.outfit-palette-page .role-row{min-width:0}
.outfit-palette-page .role-row .role-copy{min-width:0}
.outfit-palette-page .role-row .role-copy code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outfit-palette-page .outfit-builder>div:last-child>.notice{
  margin:10px 0 0;
  padding:10px 11px;
  border:1px solid var(--app-line);
  border-radius:6px;
  background:var(--app-soft);
}

/* Supporting sections use the same density and action hierarchy. */
.outfit-palette-page .outfit-support-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:20px!important;
}
.outfit-palette-page .outfit-support-grid .workflow-toolbar{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.outfit-palette-page .outfit-support-grid .workflow-toolbar>*{width:100%!important;min-width:0!important}
.outfit-palette-page .palette-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  height:86px;
  overflow:hidden;
  border:1px solid var(--app-line);
  border-radius:5px;
}
.outfit-palette-page .palette-strip span{display:block}
.outfit-palette-page .reason-grid-complete{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.outfit-palette-page .reason-card{min-width:0;overflow:hidden;border:1px solid var(--app-line);border-radius:6px;background:#fff}
.outfit-palette-page .reason-card-color{height:72px}
.outfit-palette-page .reason-card-copy{padding:11px}
.outfit-palette-page .reason-card-copy strong,.outfit-palette-page .reason-card-copy span{display:block}
.outfit-palette-page .reason-card-copy strong{font-size:.72rem}
.outfit-palette-page .reason-card-copy span{margin-top:5px;color:var(--app-muted);font-size:.63rem;line-height:1.45}

@container (max-width:720px){
  .outfit-palette-page .outfit-result-card .outfit-builder{grid-template-columns:1fr!important}
  .outfit-palette-page .outfit-result-card .outfit-preview{min-height:370px!important}
}

@media(max-width:1180px){
  .outfit-palette-page .primary-outfit-grid{
    grid-template-columns:minmax(390px,.82fr) minmax(520px,1.18fr)!important;
  }
  .outfit-palette-page .role-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .outfit-palette-page .reason-grid-complete{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1060px){
  .outfit-palette-page .tool-intro{grid-template-columns:1fr;align-items:start}
  .outfit-palette-page .tool-intro-actions{justify-content:flex-start}
  .outfit-palette-page .primary-outfit-grid,
  .outfit-palette-page .outfit-support-grid{grid-template-columns:1fr!important}
}
@media(max-width:900px){
  .outfit-palette-page .application-main{width:min(100% - 28px,1360px)}
}
@media(max-width:620px){
  .outfit-palette-page .application-main{width:min(100% - 20px,1360px)}
  .outfit-palette-page .detail-grid{grid-template-columns:1fr!important}
  .outfit-palette-page .role-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outfit-palette-page .garment-sampler{grid-template-columns:1fr}
  .outfit-palette-page .garment-stage{width:100%;height:220px}
  .outfit-palette-page .control-stack>.workflow-toolbar,
  .outfit-palette-page .outfit-support-grid .workflow-toolbar{grid-template-columns:1fr!important}
  .outfit-palette-page .control-stack>.workflow-toolbar>#regenerateButton{grid-column:auto}
  .outfit-palette-page .outfit-preview{min-height:430px!important;padding:11px!important}
  .outfit-palette-page .outfit-board{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(82px,1fr))!important;
    min-height:330px;
    gap:7px!important;
  }
  .outfit-palette-page .outfit-role-outerwear{grid-column:1;grid-row:1 / 3}
  .outfit-palette-page .outfit-role-top{grid-column:2;grid-row:1}
  .outfit-palette-page .outfit-role-bottom{grid-column:2;grid-row:2}
  .outfit-palette-page .outfit-role-footwear{grid-column:1;grid-row:3}
  .outfit-palette-page .outfit-role-accessory{grid-column:2;grid-row:3}
  .outfit-palette-page .reason-grid-complete{grid-template-columns:1fr}
}