/* Catshroom Hub · menu de duas linhas (Hub 2.0): seções em cima, itens da seção aberta embaixo.
   Carregado depois de app.css e neo-hub.css; os seletores "html body" vencem as regras antigas da barra. */
html body .top { flex-wrap: wrap; gap: 8px 10px; }
html body .top .hub-secs { display: flex; gap: 4px; flex: 0 0 auto; }
html body .top .hub-secs .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: .85rem; white-space: nowrap; text-decoration: none; min-height: 36px; box-sizing: border-box; }
html body .top .hub-secs .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
html body .top .hub-secs .btn:disabled { opacity: .55; cursor: not-allowed; }
html body .top .hub-secs .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .72rem; line-height: 18px; text-align: center; }
html body .top .hub-secs .badge:empty { display: none; }
html body .top .hub-secs .hs-soon { font-size: .68rem; font-weight: 600; opacity: .85; }
/* o 2º seletor vence neo-hub.css (html[data-estilo="neo"] .top .sp { display: none }), que deixava busca, status, tema e menu colados na navegação em vez de no canto direito */
html body .top .sp, html[data-estilo="neo"] body .top .sp { flex: 1 1 0; min-width: 0; display: block; }
html body .top .regbusca { flex: 0 1 190px; min-width: 0; order: 0; }
html body .top .regbusca #reg-busca { width: 100%; box-sizing: border-box; font-size: .85rem; }
html body .top #cloud-st { min-width: 0; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
html body .top .menu, html body .top #tema-btn { flex: 0 0 auto; }
html body .top > .nav { order: 9; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px 6px; border: 0; border-radius: 0; overflow: visible; max-width: 100%; padding-top: 8px; border-top: 1px solid var(--line); }
html body .top > .nav .btn { border-radius: 10px; padding: 6px 12px; white-space: nowrap; }
html body .top > .nav a.btn { text-decoration: none; }
html body .top > .nav .btn[hidden] { display: none !important; }
/* o nome "Catshroom Hub" não aparece no cabeçalho (a logo já identifica); o h1 fica só para leitores de tela */
html body .top h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  html body .top { padding-inline: 10px; gap: 6px; }
  html body .top .hub-secs .hs-tx, html body .top .hub-secs .hs-soon { display: none; }
  html body .top .hub-secs .btn { padding: 5px 9px; }
  html body .top .regbusca { flex: 1 1 60px; min-width: 0; }
  html body .top .regbusca #reg-busca { font-size: 16px; padding: 5px 8px; }
  html body .top #cloud-st { max-width: 5.5rem; padding-inline: 6px; }
  html body .top > .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html body .top > .nav::-webkit-scrollbar { display: none; }
  html body .top > .nav .btn { flex: 0 0 auto; min-height: 40px; }
  html body .top .hub-secs { max-width: 100%; }
  html body .top .hub-secs .btn { min-height: 40px; min-width: 40px; justify-content: center; }
  html body .top > .nav { min-width: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
}
/* Backlog e Dashboard: o status (ícone + texto) fica na 2ª linha, ao lado das abas, ocupando o espaço que sobra */
html body .top > .nav #st { flex: 1 1 0; min-width: 0; margin: 0 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
html body .top > .nav #st-ico { flex: 0 0 auto; margin-left: 6px; padding: 4px 10px; }

/* telas largas: o topo segue a mesma coluna central (--pg-max) do corpo; o neo-hub.css fixava padding 8px 14px e anulava a regra do app.css */
@media (min-width: 2000px) { html body .top, html[data-estilo="neo"] body .top { padding-inline: max(14px, calc((100% - var(--pg-max)) / 2 + 16px)); } }

/* Menu lateral da Store (11c-menu-lateral.js): a 2ª linha do cabeçalho vira uma coluna à esquerda, só na seção Store e a partir de 901px.
   Os botões são os mesmos de #hub-nav; a ordem vem da variável --lo (JS), os grupos são <div class="lat-gt">. Abaixo de 901px nada disso aparece. */
.lat-bus, .lat-gt, .lat-vz, .lat-est { display: none; }
@media (min-width: 901px) {
  body.hub-lat { --lat-w: 272px; }
  body.hub-lat.hub-lat-rec { --lat-w: 72px; }
  html body.hub-lat .app { grid-template-columns: var(--lat-w) minmax(0, 1fr); transition: grid-template-columns 220ms cubic-bezier(.23, 1, .32, 1); }
  html body.hub-lat .app > .top, html body.hub-lat .app > .foot { grid-column: 1 / -1; }
  html body.hub-lat .app > :not(.top):not(.foot) { grid-column: 2; }
  html body.hub-lat .top > .nav { position: fixed; left: 0; top: var(--hub-topo-h, 96px); bottom: var(--hub-foot-h, 0px); width: var(--lat-w); z-index: 30; order: 0; flex: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 10px; border-top: 0; border-right: 2px solid #000; background: var(--bar); overflow: hidden auto; box-sizing: border-box; transition: width 220ms cubic-bezier(.23, 1, .32, 1); }
  html body.hub-lat .top > .nav > .btn[data-hsec] { order: var(--lo, 0); display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start; text-align: left; position: relative; padding: 8px 10px; border-radius: 12px; font-size: .88rem; min-height: 0; }
  html body.hub-lat .top > .nav > .btn[hidden], html body.hub-lat .top > .nav > .lat-off { display: none !important; }
  html body.hub-lat .nav .hn-ic { width: 22px; text-align: center; font-size: 1.05rem; flex: none; }
  html body.hub-lat .nav .hn-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html body.hub-lat .nav .btn .badge { margin-left: auto; flex: none; }
  html body.hub-lat .nav .btn .badge:empty { display: none; }
  html body.hub-lat .nav .lat-bus { order: 0; display: flex; gap: 6px; margin-bottom: 4px; }
  html body.hub-lat .nav .lat-bus input { flex: 1; min-width: 0; padding: 7px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; font-size: .84rem; }
  html body.hub-lat .nav .lat-bus .btn { flex: none; width: 38px; padding: 0; justify-content: center; }
  html body.hub-lat .nav .lat-gt { order: var(--lo, 0); display: flex; align-items: center; margin: 12px 10px 3px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); user-select: none; }
  html body.hub-lat .nav .lat-gt[role="button"] { cursor: pointer; }
  html body.hub-lat .nav .lat-gt[role="button"]::after { content: "▾"; margin-left: auto; transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
  html body.hub-lat .nav .lat-gt[aria-expanded="false"]::after { transform: rotate(-90deg); }
  html body.hub-lat .nav .lat-gt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
  html body.hub-lat .nav .lat-vz { order: 999; display: block; margin: 14px 10px; font-size: .82rem; color: var(--muted); }
  html body.hub-lat .nav .lat-vz[hidden] { display: none; }
  html body.hub-lat .nav .lat-est { display: inline-block; flex: none; margin-left: 6px; width: 20px; text-align: center; opacity: 0; color: var(--muted); font-size: .9rem; transition: opacity 120ms ease-out; }
  html body.hub-lat .nav .badge + .lat-est { margin-left: 6px; }
  html body.hub-lat .nav .btn:hover .lat-est, html body.hub-lat .nav .btn:focus-visible .lat-est, html body.hub-lat .nav .lat-est.on { opacity: 1; }
  html body.hub-lat .nav .lat-est.on { color: #FFD52A; }
  html body.hub-lat .nav .lat-est:hover { color: #FFD52A; }
  /* recolhida: só os ícones; o nome fica no title do botão */
  html body.hub-lat.hub-lat-rec .nav .hn-tx, html body.hub-lat.hub-lat-rec .nav .lat-est, html body.hub-lat.hub-lat-rec .nav .lat-bus input, html body.hub-lat.hub-lat-rec .nav .lat-vz { display: none; }
  html body.hub-lat.hub-lat-rec .nav .lat-bus { justify-content: center; }
  html body.hub-lat.hub-lat-rec .nav .lat-gt { font-size: 0; height: 0; margin: 6px 12px; border-top: 2px solid rgba(255, 240, 228, .25); }
  html body.hub-lat.hub-lat-rec .nav .lat-gt::after { display: none; }
  html body.hub-lat.hub-lat-rec .top > .nav > .btn[data-hsec] { justify-content: center; padding: 8px 0; }
  html body.hub-lat.hub-lat-rec .nav .btn .badge { position: absolute; top: -4px; right: 4px; min-width: 16px; padding: 0 4px; font-size: .6rem; margin: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { html body.hub-lat .app, html body.hub-lat .top > .nav { transition: none; } }
@media (min-width: 901px) {
  /* itens da coluna: sem moldura até o hover; o aberto fica em destaque (o neo-hub.css põe borda e sombra em todo .btn) */
  html body.hub-lat .top > .nav > .btn[data-hsec]:not([aria-pressed="true"]) { background: transparent; border-color: transparent; box-shadow: none; }
  html body.hub-lat .top > .nav > .btn[data-hsec]:not([aria-pressed="true"]):hover { background: var(--hover); }
}