/* ===========================================================================
   Casa — camada compartilhada de "casca" (shell)
   1) Bordas infinitas: faixas de vidro fosco que dissolvem o conteúdo no topo
      e no rodapé ao rolar (celular), sem nenhuma linha.
   2) Layout horizontal no Mac: barra lateral fixa + conteúdo aproveitando a largura.
   Carregado DEPOIS do <style> de cada página, então vence empates de especificidade.
   =========================================================================== */

/* ---------- 1. FAIXAS DE VIDRO (só no celular / telas estreitas) ---------- */
@media (max-width: 899px){
  .edge-fade{
    position:fixed; left:0; right:0; z-index:25; pointer-events:none;
    -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  }
  .edge-fade.top{
    top:0; height:calc(env(safe-area-inset-top) + 20px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);
  }
  .edge-fade.bottom{
    bottom:0; height:calc(env(safe-area-inset-bottom) + 24px);
    -webkit-mask-image:linear-gradient(to top,#000 0,#000 45%,transparent 100%);
            mask-image:linear-gradient(to top,#000 0,#000 45%,transparent 100%);
  }
  /* véu de cor por baixo do blur, casando com o fundo bege — sem linha nenhuma */
  .edge-fade::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(var(--ef-dir,to bottom),
      var(--bg,#f5f2ec) 0%, rgba(245,242,236,0) 100%);
  }
  .edge-fade.bottom::after{ --ef-dir:to top; }

  /* Barras inferiores fixas: tirar a linha (a "borda") e fazer dissolver no topo */
  nav#nav{ border-top:none !important;
    -webkit-mask-image:linear-gradient(to top,#000 0,#000 78%,transparent 100%);
            mask-image:linear-gradient(to top,#000 0,#000 78%,transparent 100%); }
  .fbar{ border-top:none !important; }
}

/* A barra lateral nunca aparece no celular */
.side{ display:none; }

/* ---------- 2. LAYOUT HORIZONTAL (Mac / telas largas) ---------- */
@media (min-width: 900px){
  :root{ --side-w:248px; --side-gap:20px; --side-x:calc(var(--side-gap) + var(--side-w) + 28px); }

  /* esconde os atalhos de navegação que eram só do mobile */
  #navBtn, .topbar .avas + *, body > #ptr{ }
  #navBtn{ display:none !important; }

  /* Barra lateral fixa à esquerda */
  .side{
    display:flex; flex-direction:column;
    position:fixed; z-index:35;
    top:max(var(--side-gap),env(safe-area-inset-top));
    left:var(--side-gap);
    bottom:max(var(--side-gap),env(safe-area-inset-bottom));
    width:var(--side-w);
    padding:22px 14px 18px;
    background:linear-gradient(180deg,#fdfbf7,#f4f0e8);
    border:1px solid rgba(120,100,70,.12);
    border-radius:22px;
    box-shadow:0 1px 2px rgba(70,58,44,.04), 0 18px 44px -26px rgba(70,58,44,.4);
    overflow-y:auto;
  }
  .side .brand{
    display:flex; align-items:center; gap:11px; padding:6px 10px 4px; margin-bottom:14px;
  }
  .side .brand .mk{
    font-family:var(--serif); font-weight:600; font-size:26px; line-height:1; color:var(--text);
  }
  .side .brand .mk em{ font-style:italic; }
  .side .avas{ display:flex; margin-left:auto; }
  .side .ava{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none;
    border:1px solid rgba(255,255,255,.6); background:#e9e4da;
    box-shadow:0 1px 3px rgba(70,58,44,.14); }
  .side .ava img{ width:100%; height:100%; object-fit:cover; display:block; }
  .side .ava.bianca{ margin-left:-9px; }

  .side .slbl{ font-size:9.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--text2); margin:8px 12px 8px; }

  .side a.slink{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
    color:var(--text); margin-bottom:2px; transition:background .15s ease, color .15s ease;
  }
  .side a.slink .si{ flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--accent); }
  .side a.slink .si svg{ width:21px; height:21px; fill:none; stroke:currentColor;
    stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
  .side a.slink .sn{ font-family:var(--serif); font-weight:600; font-size:18px; line-height:1; }
  .side a.slink:hover{ background:rgba(120,100,70,.07); }
  .side a.slink.on{ background:var(--accent-soft); }
  .side a.slink.on .sn{ color:var(--accent); }

  .side .sfoot{ margin-top:auto; padding:14px 12px 2px;
    font-family:var(--serif); font-style:italic; font-size:13px; color:var(--text3); }

  /* Conteúdo principal: abre espaço pra barra e usa a largura */
  body > .app, .app{
    margin-left:var(--side-x) !important;
    max-width:1080px !important;
    padding-left:8px !important; padding-right:40px !important;
    padding-top:max(26px,env(safe-area-inset-top)) !important;
  }

  /* Home: módulos em 2 colunas (3 linhas de 2 blocos); Rotinas segue largo no topo */
  .grid{ grid-template-columns:repeat(2,1fr) !important; }
  .grid .tile.full{ grid-column:auto !important; }
  .grid .tile.wide{ grid-column:1 / -1 !important; }
  .hero{ aspect-ratio:21/9 !important; }

  /* avatares já estão na barra lateral — evita duplicar no conteúdo da Home */
  .topbar .avas{ display:none !important; }

  /* Barras inferiores fixas acompanham o recuo da barra lateral */
  nav#nav, .actionbar, .fbar{ left:var(--side-x) !important; }

  /* sem faixas de vidro aqui — no desktop o conteúdo já respira */
  .edge-fade{ display:none !important; }
}

/* telas bem largas: centraliza o conteúdo pra não esticar demais */
/* telas largas: menu + conteúdo viram um GRUPO centralizado (menu colado ao conteúdo, não à borda) */
@media (min-width: 1500px){
  body > .app, .app{ margin-right:auto !important;
    margin-inline-start:calc(var(--side-x) + (100vw - var(--side-x) - 1080px)/2) !important; }
  .side{ left:calc(var(--side-gap) + (100vw - var(--side-x) - 1080px)/2) !important; }
}