/* RITSUGAN — consistência de navegação e acessibilidade incremental.
   Mantém o shell atual; apenas corrige contratos visuais sem substituir app.css. */

:where(button,a,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold,#d1b879);
  outline-offset:3px;
}

.master-hub-groups{display:grid;gap:22px}
.master-hub-group{display:grid;gap:12px;padding-top:4px}
.master-hub-group+.master-hub-group{border-top:1px solid var(--line);padding-top:20px}
.master-hub-group>.section-head{margin:0}
.master-hub-secondary{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015);padding:10px 12px}
.master-hub-secondary>summary{cursor:pointer;font-weight:700}
.master-hub-secondary>p{margin:8px 0 10px}
.master-hub-secondary .workspace-hub-grid.compact{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}

@media(max-width:900px){
  /* O chrome autenticado possui vários controles independentes. Sem wrap, a soma
     das larguras mínimas força o documento inteiro além do viewport.
     Refluir a própria barra preserva todos os controles sem mascarar overflow. */
  .top{flex-wrap:wrap;max-width:100%;min-width:0;align-content:center}
  .top>*{min-width:0}
  .top .spacer{flex:1 1 12px;min-width:0}
}

@media(max-width:760px){
  /* A barra inferior tem cinco destinos. Itens continua disponível em “Mais”/sidebar. */
  .mobile-navbtn[data-mobile-route="itens"]{display:none}
  .mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .master-hub-groups{gap:18px}
  .master-hub-group+.master-hub-group{padding-top:16px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media(max-width:640px){.tutorial-open.top-tutorial{min-width:44px!important;width:44px!important;height:44px!important;flex:0 0 44px!important}}