/* Instalar o Max como app no celular (prévia ed55c46 + 5704cf7, aprovada por Alan em 04/11). Usado pelo Início e pelas Configurações
   (instalar.js). Os tokens de cor e de tipo vêm de quem usa (inicio.css, entrada.css); o vidro, do web/vidro.css da Arte Slime. */

/* o aviso discreto no alto do Início (só no celular): fecha no X e não volta neste aparelho */
.ins-aviso{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) var(--e1) var(--e2) var(--e3);border-radius:var(--r-cartao);background:var(--acento-tinta);margin-bottom:var(--e4)}
.ins-aviso img{width:40px;height:40px;border-radius:10px;flex:none}
.ins-aviso .t{flex:1;min-width:0}
.ins-aviso .t b{display:block;font-weight:600;font-size:14px;line-height:19px}
.ins-aviso .t span{display:block;font-size:var(--fs-sec);line-height:17px;color:var(--suave)}
.ins-aviso .acao{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:22px;border:0;background:var(--sup);color:var(--acento);font-weight:600;font-size:14px;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acento) 35%,transparent)}
.ins-aviso .acao svg{width:16px;height:16px}
.ins-fechar{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--suave);border-radius:22px;cursor:pointer;padding:0}
.ins-fechar svg{width:18px;height:18px}
.ins-copiou{font-size:var(--fs-sec);line-height:var(--lh-sec);color:var(--suave);margin:calc(var(--e2) * -1) 0 var(--e4);overflow-wrap:anywhere}

/* o passo a passo do iPhone: 3 passos, o número e o símbolo à direita */
.ins-passos{list-style:none;margin:0 0 var(--e3);padding:0;display:grid;gap:var(--e2)}
.ins-passos li{display:flex;align-items:center;gap:var(--e3);min-height:52px;padding:var(--e2) var(--e3);border-radius:14px;background:color-mix(in srgb,var(--sup) 70%,transparent);box-shadow:inset 0 0 0 1px var(--borda)}
.ins-passos .m{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;background:var(--acento);color:var(--sobre-acento)}
.ins-passos .t{flex:1;min-width:0;font-size:15px;line-height:20px}
.ins-passos .t b{font-weight:600}
.ins-passos .dica{display:block;font-size:var(--fs-leg);line-height:16px;color:var(--suave);margin-top:2px}
.ins-passos .sim{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--acento);background:var(--sup);box-shadow:inset 0 0 0 1px var(--borda)}
.ins-passos .sim svg{width:22px;height:22px}

/* a folha do passo a passo (Início, iPhone): sobe de baixo, de vidro */

/* Configurações › App no celular */
.ins-app{display:flex;align-items:center;gap:var(--e3);margin:var(--e2) 0 var(--e3)}
.ins-app img{width:56px;height:56px;border-radius:14px;flex:none}
.ins-app b{display:block;font-size:17px;line-height:22px}
.ins-estado{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:999px;font-size:var(--fs-leg);font-weight:600;color:var(--suave);background:color-mix(in srgb,var(--suave) 18%,transparent)}
.ins-estado.sim{color:var(--sucesso);background:color-mix(in srgb,var(--sucesso) 18%,transparent)}
.ins-menu{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3);border-radius:14px;background:var(--sup2);margin-top:var(--e3)}

/* movimento: a folha sobe com a mola da Arte no Animado; no Reduzido só aparece; no Desligado, nada se mexe */
@keyframes ins-sobe{from{transform:translateY(40px);opacity:0}}
@keyframes ins-aparece{from{opacity:0}}
.ins-quebra{overflow-wrap:anywhere}

/* o passo a passo do iPhone numa gaveta única (web/pecas.css) */
.ins-g .p-gaveta-corpo{padding-top:var(--e2)}
.ins-g .p-gaveta-pe .p-botao{width:100%}