/* =====================================================================
   Sokol · Banner e painel de consentimento
   Usa os mesmos tokens das páginas (--surface, --ink, --mut, --rule).
   Regra da marca: nenhuma cor de destaque. Aceitar e Recusar têm o
   mesmo peso visual, de propósito.
   ===================================================================== */

/* Banner: cartão discreto no canto inferior, sem bloquear a página */
.ck-banner{
  position:fixed;z-index:40;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  max-width:560px;padding:22px 24px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--ink);box-shadow:0 0 0 1px var(--rule),0 24px 48px -20px rgba(0,0,0,.45);
  font:15px/1.55 "Outfit",system-ui,"Segoe UI",sans-serif;font-weight:350;
  animation:ck-in .35s cubic-bezier(.2,.7,.2,1)
}
@keyframes ck-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ck-text{color:var(--mut)}
.ck-text a,.ck-more a{color:var(--ink);text-underline-offset:2px}

/* Botões: Aceitar e Recusar idênticos; "Escolher" é um link discreto */
.ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.ck-btn{
  font:inherit;font-weight:500;font-size:15px;line-height:1;cursor:pointer;
  min-width:112px;height:42px;padding:0 20px;border-radius:10px;
  background:transparent;color:var(--ink);border:1px solid var(--ink);white-space:nowrap
}
.ck-btn:hover{background:var(--rule)}
.ck-link{font:inherit;font-size:15px;font-weight:500;cursor:pointer;background:none;border:0;color:var(--ink);
  padding:0 6px;height:42px;text-decoration:underline;text-underline-offset:3px}
.ck-btn:focus-visible,.ck-link:focus-visible,.ck-x:focus-visible,.ck-dialog input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Painel de escolhas (janela nativa <dialog>: foco e tecla Esc já acessíveis) */
.ck-dialog{
  width:min(620px,calc(100vw - 32px));max-height:calc(100svh - 48px);margin:auto;padding:0;
  border:0;border-radius:16px;background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 1px var(--rule),0 40px 80px -30px rgba(0,0,0,.6);
  font:16px/1.55 "Outfit",system-ui,"Segoe UI",sans-serif;font-weight:350
}
.ck-dialog::backdrop{background:rgba(10,11,15,.55);backdrop-filter:blur(2px)}
.ck-in{padding:28px 30px 24px}
.ck-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ck-head h2{font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.01em}
.ck-x{flex:none;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--mut);font-size:26px;line-height:1;cursor:pointer}
.ck-x:hover{background:var(--rule);color:var(--ink)}
.ck-intro{color:var(--mut);margin-top:8px}
.ck-note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--rule);font-size:14.5px}
.ck-cat{border-top:1px solid var(--rule);margin-top:20px;padding-top:16px}
.ck-cat p{color:var(--mut);font-size:14.5px;margin-top:6px}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
label.ck-row{cursor:pointer}
.ck-ct{font-weight:500;font-size:17px}
.ck-cs{font-size:13.5px;color:var(--mut)}
.ck-cs2{display:block;margin-top:1px}
.ck-more{margin-top:18px;font-size:14.5px}
.ck-status{min-height:1.4em;margin-top:10px;font-size:14px;color:var(--mut)}

/* Interruptor (checkbox com aparência de chave) */
.ck-dialog input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;cursor:pointer;
  width:46px;height:26px;border-radius:13px;background:var(--rule);position:relative;
  box-shadow:inset 0 0 0 1px var(--rule);transition:background .2s
}
.ck-dialog input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--mut);transition:transform .2s,background .2s}
.ck-dialog input[type=checkbox]:checked{background:var(--ink)}
.ck-dialog input[type=checkbox]:checked::after{transform:translateX(20px);background:var(--surface)}

/* Botão de rodapé com cara de link */
.ck-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.ck-open:hover{color:var(--ink)}

@media (max-width:700px){
  .ck-banner{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none;padding:18px}
  .ck-actions .ck-btn{flex:1 1 0;min-width:0;padding:0 10px}
  .ck-in{padding:22px 20px 20px}
}
@media (prefers-reduced-motion:reduce){.ck-banner{animation:none}.ck-dialog input[type=checkbox],.ck-dialog input[type=checkbox]::after{transition:none}}