/* =====================================================================
   Lançador de unidades TOFY — estilo

   Só tokens do brand.css: nenhuma cor solta a não ser a de cada ícone,
   que é constante do grupo e vem do próprio SVG. Ver
   docs/LANCADOR-DE-UNIDADES.md.
   ===================================================================== */

/* ---------- Botão na barra da holding ----------

   A .tofy-bar é `space-between` com dois filhos. Entrando um terceiro, o
   texto do meio ficaria centralizado e a barra mudaria em 236 páginas.
   Por isso o script marca o container e aqui o alinhamento vira "tudo à
   direita, marca empurrada para a esquerda": o resultado na tela é o
   mesmo de antes, com o botão no fim. */
.tofy-bar .tofy-container.tofy-has-apps{justify-content:flex-end;gap:10px 18px}
.tofy-bar .tofy-container.tofy-has-apps>.tofy-bar__brand{margin-right:auto}
.tofy-holding-bar>div.tofy-has-apps{justify-content:flex-end;gap:10px 16px}
.tofy-holding-bar>div.tofy-has-apps>a:first-child{margin-right:auto}

/* A altura precisa de cuidado: a linha de texto da barra tem ~19px, e um
   botao de 34px empurraria a .tofy-bar de 41px para 56px em **todas** as
   paginas do grupo. A margem negativa devolve ao fluxo a altura da linha,
   e o alvo de toque de 44px vem do ::before, que cresce sem ocupar
   espaco. Aparencia pequena, area de clique grande. */
.tofy-apps-bt{
  position:relative;
  display:inline-grid;place-items:center;
  width:38px;height:38px;margin:-10px 0;padding:0;flex:0 0 auto;
  border:0;border-radius:11px;
  background:transparent;color:inherit;cursor:pointer;
  transition:background .18s var(--tofy-ease,ease);
}
.tofy-apps-bt::before{content:"";position:absolute;inset:-3px}
.tofy-apps-bt:hover,
.tofy-apps-bt[aria-expanded="true"]{background:rgba(255,255,255,.14)}
.tofy-apps-bt:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.tofy-apps-bt svg{width:25px;height:25px;display:block}
.tofy-apps-bt--header{
  width:40px;height:40px;margin:0;
  color:var(--tofy-text-2);border:1px solid var(--tofy-line);
}
.tofy-apps-bt--header:hover,
.tofy-apps-bt--header[aria-expanded="true"]{
  color:var(--tofy-ink);background:var(--tofy-surface-2);
}

/* ---------- Painel ---------- */
.tofy-apps-painel{
  position:fixed;z-index:9000;
  width:min(21.5rem,calc(100vw - 24px));
  max-height:min(30rem,calc(100vh - 88px));
  overflow-y:auto;overscroll-behavior:contain;
  padding:18px 14px 10px;
  background:var(--tofy-surface);color:var(--tofy-ink);
  border:1px solid var(--tofy-line);
  border-radius:var(--tofy-radius,16px);
  box-shadow:var(--tofy-shadow,0 18px 48px rgba(0,0,0,.22));
  font-family:var(--tofy-font,system-ui,sans-serif);
  letter-spacing:normal;
}
.tofy-apps-painel[hidden]{display:none}

.tofy-apps-titulo{
  margin:0 8px 14px;
  font-family:var(--tofy-mono);font-size:10.5px;letter-spacing:.14em;
  /* --tofy-faint da 3,84:1 no tema escuro, abaixo do minimo de 4,5.
     --tofy-muted da 6,09 no escuro e 5,3 no claro. */
  text-transform:uppercase;color:var(--tofy-muted);
}

.tofy-apps-grade{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  margin:0;padding:0;list-style:none;
}

.tofy-apps-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:104px;padding:12px 6px 10px;
  border-radius:var(--tofy-radius-sm,10px);
  color:var(--tofy-ink);text-decoration:none;text-align:center;
  transition:background .16s var(--tofy-ease,ease);
}
.tofy-apps-item:hover{background:var(--tofy-surface-2)}
.tofy-apps-item:focus-visible{
  outline:none;background:var(--tofy-surface-2);
  box-shadow:0 0 0 2px var(--tofy-accent);
}
.tofy-apps-item__icone{position:relative;flex:0 0 auto}
.tofy-apps-item__icone svg{width:42px;height:42px;display:block;border-radius:11px}
.tofy-apps-item__nome{
  font-size:12.5px;line-height:1.25;font-weight:500;
  /* Duas linhas no máximo: "Cronograma de Estudos" não pode empurrar a
     célula vizinha para baixo e desalinhar a grade. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Unidade em construção: ponto no canto **e** texto no aria-label. Cor
   sozinha não é informação para quem não a enxerga. */
.tofy-apps-item__obra{
  position:absolute;right:-2px;bottom:-2px;
  width:12px;height:12px;border-radius:50%;
  background:var(--tofy-muted);
  border:2px solid var(--tofy-surface);
}

/* Onde o usuário já está: não navega, serve de referência. */
.tofy-apps-item--aqui{cursor:default;background:var(--tofy-accent-tint)}
.tofy-apps-item--aqui:hover{background:var(--tofy-accent-tint)}
.tofy-apps-item--aqui .tofy-apps-item__nome{font-weight:650;color:var(--tofy-accent)}

.tofy-apps-rodape{
  margin:8px 0 0;padding:12px 8px 4px;
  border-top:1px solid var(--tofy-line-soft,var(--tofy-line));
  text-align:center;
}
.tofy-apps-rodape a{
  font-size:12px;color:var(--tofy-text-2);text-decoration:none;
}
.tofy-apps-rodape a:hover{color:var(--tofy-accent);text-decoration:underline}

/* Tela estreita: a .tofy-bar ja quebra em duas linhas, marca em cima e
   texto embaixo. Deixado ao acaso, o botao cai numa **terceira** linha e
   a barra cresce 28px em todas as paginas do grupo. Aqui ele sobe para a
   primeira linha, ao lado da marca, e o texto passa a ocupar a segunda
   inteira — mesma altura de antes. */
@media (max-width:640px){
  .tofy-bar .tofy-container.tofy-has-apps>span:not(.tofy-bar__brand){
    order:2;flex-basis:100%;
  }
  .tofy-bar .tofy-container.tofy-has-apps>.tofy-apps-bt{order:1}
  .tofy-apps-bt--header{width:40px;height:40px;margin:0}
}

@media (max-width:480px){
  .tofy-apps-painel{width:calc(100vw - 20px);padding:16px 10px 8px}
  .tofy-apps-item{min-height:98px}
}

@media (prefers-reduced-motion:reduce){
  .tofy-apps-bt,.tofy-apps-item{transition:none}
}