/* Início, ferramentas, projetos e plano (pages.js). Só variáveis de token. */

/* Início */
.home-hero{display:flex;flex-direction:column;gap:var(--spacingL);margin-bottom:var(--spacingXXXL)}
.home-hero h1{font:var(--typeLargeTitle)}
.home-hero > p{max-width:620px;font:var(--typeBody2);color:var(--colorNeutralForeground3)}
.home-composer{display:flex;flex-direction:column;gap:var(--spacingM);padding:var(--spacingL) var(--spacingL) var(--spacingM)}
.home-composer textarea{min-height:72px}
.home-composer-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingM)}
.home-chips{display:flex;flex-wrap:wrap;gap:var(--spacingS)}
.home-composer-row .button.primary{margin-left:auto}
.home-target{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingS);color:var(--colorNeutralForeground2)}
.home-section{display:flex;flex-direction:column;gap:var(--spacingS);margin-top:var(--spacingXXXL)}
.home-section .section-heading{margin-bottom:var(--spacingS)}
.home-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--spacingL)}
.home-recent > .empty-result,.home-recent > .notice,.home-recent > p{grid-column:1 / -1}
.home-recent .asset-card{display:flex;flex-direction:column;overflow:hidden;padding:0;border:0;border-radius:var(--borderRadiusXLarge);background:var(--colorNeutralBackground1);box-shadow:var(--shadow4);color:var(--colorNeutralForeground1);text-align:left;cursor:pointer}
.home-recent .asset-card:hover{background:var(--colorNeutralBackground1Hover);box-shadow:var(--shadow8)}
.home-recent .asset-image{display:grid;place-items:center;height:180px}
.home-recent .asset-image .pixel-img{max-width:100%;max-height:100%;image-rendering:pixelated}
.home-recent .asset-caption{display:flex;justify-content:space-between;gap:var(--spacingS);padding:var(--spacingM)}
.home-recent .asset-caption strong{display:block;font:var(--typeBody1Strong)}
.home-recent .asset-caption small,.home-recent .asset-caption > span{font:var(--typeCaption1);color:var(--colorNeutralForeground3)}

/* Ferramentas */
.catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingM);margin-bottom:var(--spacingXL)}
.catalog-search{flex:1 1 240px;max-width:360px}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacingL)}
.catalog-card{gap:var(--spacingS);height:100%}
.catalog-card h3{font:var(--typeSubtitle2)}
.catalog-card p{flex:1;color:var(--colorNeutralForeground3)}
.catalog-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingS)}
.catalog-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--borderRadiusMedium);background:var(--colorBrandBackground2);color:var(--colorBrandForeground2)}
.catalog-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingS);color:var(--colorNeutralForeground3)}
.catalog-card-foot small{font:var(--typeCaption1)}
.catalog-spaces{margin-top:var(--spacingXXXL)}

/* Projetos */
.projects-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--spacingL);align-items:start}
.projects-panel{display:flex;flex-direction:column;gap:var(--spacingM)}
.projects-panel h2{font:var(--typeSubtitle1)}
.projects-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.projects-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingM);padding:var(--spacingS) 0;border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.projects-item strong{display:block;font:var(--typeBody1Strong)}
.projects-item small{font:var(--typeCaption1);color:var(--colorNeutralForeground3)}
.projects-form{display:flex;flex-direction:column;gap:var(--spacingM)}

/* Plano */
.roadmap-phases{display:flex;flex-direction:column;gap:var(--spacingM);margin:0;padding:0;list-style:none}
.roadmap-phase{display:flex;gap:var(--spacingL);align-items:flex-start}
.roadmap-number{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--borderRadiusCircular);background:var(--colorBrandBackground2);color:var(--colorBrandForeground2);font:var(--typeBody1Strong)}
.roadmap-phase h2{font:var(--typeSubtitle2)}
.roadmap-phase p{margin:var(--spacingXS) 0 var(--spacingS);max-width:720px;color:var(--colorNeutralForeground3)}
.roadmap-footer{max-width:720px;margin-top:var(--spacingXL)}

@media (max-width:900px){
  .projects-layout{grid-template-columns:1fr}
  .home-composer-row .button.primary{margin-left:0;width:100%}
}
@media (max-width:600px){
  .catalog-grid,.home-recent{grid-template-columns:1fr}
  .catalog-search{max-width:none}
  .roadmap-phase{flex-direction:column;gap:var(--spacingS)}
}