/* VoltZ Book · layout personalizável de cards (window.G.layout). Prefixo de classe gk-.
   Grade de 12 colunas com vão de 12px. Modo edição: arrastar, redimensionar, ocultar.
   Padrão startup: superfícies sólidas, contorno neutro, sem glow. Movimento sóbrio. */

/* ── Grade ── */
.gk-host{--gk-r:18px;position:relative;display:grid;grid-template-columns:repeat(var(--gk-cols,12),minmax(0,1fr));gap:12px;align-items:stretch;min-width:0}
.gk-item{position:relative;min-width:0;display:flex;flex-direction:column;border-radius:var(--gk-r);transition:scale .2s var(--ease),box-shadow .2s var(--ease)}
.gk-item[hidden]{display:none}
.gk-item>:first-child{flex:1 1 auto;min-width:0}

/* ── Modo edição: contorno tracejado ── */
.gk-item::before{content:"";position:absolute;inset:-5px;border:1px dashed rgba(255,255,255,.18);border-radius:calc(var(--gk-r) + 5px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.gk-editing .gk-item::before{opacity:1}
.gk-editing .gk-item{cursor:default}
.gk-editing .gk-item>:first-child{pointer-events:none}

/* ── Barrinha de controles (canto superior direito) ── */
.gk-tools{position:absolute;top:-14px;right:6px;z-index:3;display:flex;align-items:center;gap:2px;padding:3px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:11px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
.gk-editing .gk-tools{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.gk-grip,.gk-tools button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.gk-grip{width:24px;color:var(--text-3);cursor:grab;touch-action:none}
.gk-tools button:hover,.gk-grip:hover{background:rgba(255,255,255,.06);color:var(--text)}
.gk-tools button[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.gk-tools button[aria-disabled="true"]:hover{background:transparent;color:var(--text-2)}
.gk-tools button:focus-visible,.gk-resize:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

/* ── Alça de redimensionar (canto inferior direito) ── */
.gk-resize{position:absolute;right:-6px;bottom:-6px;z-index:3;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line-2);color:var(--text-2);cursor:ew-resize;touch-action:none;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),color .15s var(--ease),border-color .15s var(--ease),visibility 0s linear .2s}
.gk-editing .gk-resize{opacity:1;visibility:visible;transition-delay:0s}
.gk-resize:hover,.gk-item.gk-resizing .gk-resize{color:var(--text);border-color:var(--accent-ink)}

/* Rótulo "4 de 12 colunas" enquanto redimensiona (ou com foco no teclado) */
.gk-size{position:absolute;right:0;bottom:-34px;z-index:4;padding:3px 9px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.gk-item.gk-resizing .gk-size,.gk-resize:focus~.gk-size{opacity:1;transform:none}

/* ── Arrastar: o card levanta e segue o ponteiro ── */
.gk-item.gk-dragging{z-index:40;scale:1.02;box-shadow:0 18px 40px rgba(0,0,0,.45);cursor:grabbing}
.gk-is-dragging,.gk-is-dragging *{cursor:grabbing!important}
.gk-is-resizing,.gk-is-resizing *{cursor:ew-resize!important}
.gk-item.gk-leaving{pointer-events:none}

/* ── Aviso de cards ocultos (rodapé central, fixo) ── */
.gk-notice{position:fixed;left:50%;bottom:20px;translate:-50% 0;z-index:45;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:6px 6px 6px 14px;background:#1A1724;border:1px solid rgba(245,158,11,.45);border-radius:999px;color:#fff;font-family:var(--sans);font-size:13.5px;line-height:1.3}
.gk-notice-ico{display:grid;place-items:center;flex-shrink:0;color:#F59E0B}
.gk-notice-text{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gk-notice-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* Menu "Ver quais", acima da pílula */
.gk-menu{position:fixed;left:50%;translate:-50% 0;z-index:46;width:min(340px,calc(100vw - 32px));padding:8px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:16px;font-family:var(--sans)}
.gk-menu[hidden]{display:none}
.gk-menu-title{margin:4px 8px 8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-2)}
.gk-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.gk-menu-list li{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 6px 0 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.gk-menu-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}
.gk-link{display:block;width:100%;margin-top:8px;padding:10px 12px;border:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:none;color:var(--accent-ink);text-align:left;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.gk-link:hover{text-decoration:underline}
.gk-link:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px}

/* ── Status de salvamento ("Salvo na sua conta" / "Salvo só neste computador") ── */
.gk-savestate{margin:6px 8px 2px;font-family:var(--sans);font-size:12px;line-height:1.3;color:var(--text-3)}
.gk-savestate-edit{position:absolute;left:0;bottom:-30px;margin:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s}
.gk-editing .gk-savestate-edit{opacity:1;visibility:visible;transition-delay:0s}

/* ── Movimento reduzido: sem translate/scale, só fade curto ── */
@media (prefers-reduced-motion:reduce){
  .gk-item,.gk-item::before,.gk-tools,.gk-resize,.gk-size{transition:none!important}
  .gk-item.gk-dragging{scale:none}
}