/* Cookie consent — banner and preferences dialog.
   Self-contained: every rule is scoped to .sr-c* so this file works on the
   landing page (stackroll.css) and the blog/policy pages (stackroll-blog.css)
   without inheriting either. Colours are the brand set used across both:
   #201E1F page, #22222B card, #44414E line, #F8F9FF ink, #C2C1D0 muted,
   #F0F12F yellow, #634FEE purple. */

/* ---- Banner -------------------------------------------------------------- */
.sr-consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:16px;font-family:BG,Arial,sans-serif;color:#F8F9FF}
.sr-consent-banner[hidden]{display:none}
.sr-consent-card{width:min(1280px,100%);margin-inline:auto;display:flex;flex-direction:column;gap:20px;padding:24px;background:#22222B;border:1px solid #44414E;border-radius:20px;box-shadow:0 24px 70px #0009}
.sr-consent-title{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.6px;line-height:1.2}
.sr-consent-text{margin:0;font-size:15px;line-height:1.6;color:#C2C1D0;max-width:860px}
.sr-consent-text a{color:#d7ceff;text-decoration:underline;text-underline-offset:4px}
.sr-consent-text a:hover{color:#F0F12F}
.sr-consent-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Accept All and Reject All are deliberately the SAME button: refusing must be
   as easy and as visible as accepting (EDPB 2023 guidance). Only "Customize"
   is quieter, because it neither grants nor refuses. */
.sr-c-btn{border:1px solid transparent;border-radius:12px;margin:0;padding:14px 22px;min-height:48px;gap:0;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:15px;font-weight:650;cursor:pointer;background:#F0F12F;color:#16161C;transition:transform .2s,background .2s,border-color .2s}
.sr-c-btn:hover{transform:translateY(-2px);background:#fcfd60}
.sr-c-btn.ghost{background:transparent;border-color:#4b4654;color:#F8F9FF}
.sr-c-btn.ghost:hover{background:#302b3c;border-color:#83749f}
.sr-c-btn:focus-visible,.sr-c-switch input:focus-visible+.sr-c-track{outline:3px solid #00A9EB;outline-offset:4px}

/* ---- Preferences dialog -------------------------------------------------- */
.sr-consent-dialog{padding:0;border:1px solid #634FEE;border-radius:20px;background:#201E1F;color:#F8F9FF;font-family:BG,Arial,sans-serif;width:min(620px,calc(100% - 32px));max-height:min(90dvh,90vh)}
.sr-consent-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}
.sr-consent-dialog-body{display:flex;flex-direction:column;max-height:inherit}
.sr-consent-head{position:relative;padding:26px 60px 18px 26px;border-bottom:1px solid #44414E}
/* min-height:0 and gap:0 undo the landing page's global button rule, which
   would otherwise make this 40 px square 52 px tall. */
.sr-c-close{position:absolute;top:18px;right:18px;width:40px;height:40px;min-height:0;gap:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center;font:inherit;font-size:24px;font-weight:400;line-height:1;background:#22222B;color:#F8F9FF;border:1px solid #44414E;border-radius:10px;cursor:pointer}
.sr-c-close:hover{background:#34313f}
.sr-c-close:focus-visible{outline:3px solid #00A9EB;outline-offset:3px}
.sr-consent-head h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.7px}
.sr-consent-head h2 span[aria-hidden]{font-size:22px;line-height:1}
.sr-consent-head p{margin:0;font-size:14px;line-height:1.6;color:#C2C1D0}
.sr-consent-rows{padding:8px 26px;overflow-y:auto;flex:1}
.sr-c-row{padding:18px 0;border-top:1px dashed #44414E}
.sr-c-row:first-child{border-top:0}
.sr-c-row-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sr-c-row-head label{font-size:16px;font-weight:650;color:#F8F9FF;cursor:pointer}
.sr-c-row-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sr-c-always{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#C2C1D0}
.sr-c-desc{margin:8px 0 0;font-size:14px;line-height:1.6;color:#C2C1D0}

/* Switch: a real checkbox, visually hidden, with a painted track beside it. */
.sr-c-switch{display:inline-flex;align-items:center;position:relative}
.sr-c-switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.sr-c-track{display:block;width:46px;height:26px;border-radius:13px;background:#3a3644;border:1px solid #56515f;cursor:pointer;transition:background .2s,border-color .2s}
.sr-c-track:after{content:'';display:block;width:18px;height:18px;margin:3px;border-radius:50%;background:#C2C1D0;transition:transform .2s,background .2s}
.sr-c-switch input:checked+.sr-c-track{background:#634FEE;border-color:#9485FA}
.sr-c-switch input:checked+.sr-c-track:after{transform:translateX(20px);background:#F8F9FF}
.sr-c-switch input:disabled+.sr-c-track{cursor:default;background:#4a4553;border-color:#5d5768;opacity:.75}
/* Strictly Necessary is checked AND disabled: it must still read as ON, only
   dimmed. Without this the disabled rule above would paint it like an off
   switch and the row would contradict its own "Always active" label. */
.sr-c-switch input:checked:disabled+.sr-c-track{background:#5a4bb8;border-color:#7d70c4}

.sr-consent-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:18px 26px 24px;border-top:1px solid #44414E}

/* ---- Footer entry point -------------------------------------------------- */
/* A button styled as a link: it must be indistinguishable from the <a> entries
   beside it in the footer nav. stackroll.css styles EVERY <button> on the
   landing page as a 52 px yellow pill — inline-flex, centred, 24 px gap, 12 px
   radius — so this resets that rule outright instead of inheriting half of it
   and inflating the whole footer row to 52 px. The blog and policy pages have
   no such rule; the same reset is harmless there. */
.sr-consent-link{display:inline;margin:0;padding:0;border:0;border-radius:0;min-height:0;height:auto;gap:0;background:none;color:inherit;font:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer;transition:color .2s;-webkit-appearance:none;appearance:none}
.sr-consent-link:hover{color:#F0F12F;background:none;transform:none}
.sr-consent-link:focus-visible{outline:3px solid #00A9EB;outline-offset:4px}

@media(max-width:800px){
  .sr-consent-banner{padding:12px}
  .sr-consent-card{padding:20px;gap:16px;border-radius:16px}
  .sr-consent-title{font-size:20px}
  .sr-consent-text{font-size:14px}
  .sr-consent-actions{flex-direction:column}
  .sr-c-btn{width:100%;min-height:50px}
  .sr-consent-head,.sr-consent-rows,.sr-consent-foot{padding-left:20px;padding-right:20px}
  .sr-consent-foot{flex-direction:column-reverse}
}
@media(prefers-reduced-motion:reduce){.sr-c-btn,.sr-c-track,.sr-c-track:after{transition:none}}