/* Magic Bookmark cookie banner. Loaded on every page, so it only leans on
   the shared tokens in styles.css, not on landing.css or legal.css. */

.mbc{
  position:fixed;left:24px;bottom:24px;z-index:9999;
  width:min(420px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);overflow-y:auto;
  box-sizing:border-box;padding:22px 22px 18px;
  background:var(--aqua-400);color:var(--brown-150);
  border:1px solid color-mix(in oklch,var(--brown-200) 22%,transparent);
  border-radius:var(--radius-lg,16px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  font-family:var(--font-sans);font-size:14.5px;line-height:1.5;
  opacity:0;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease;
}
.mbc[hidden]{display:none}
.mbc.is-open{opacity:1;transform:none}
.mbc *{box-sizing:border-box}

.mbc-title{margin:0 0 6px;font-weight:700;font-size:15.5px;color:var(--brown-150)}
.mbc-text{margin:0;color:var(--aqua-200)}
.mbc-text a{color:var(--brown-150);text-decoration:underline;text-underline-offset:2px}
.mbc-text a:hover{color:var(--brown-250)}

.mbc-prefs{margin-top:14px;border-top:1px solid color-mix(in oklch,var(--brown-200) 18%,transparent)}
.mbc-prefs[hidden]{display:none}
.mbc-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;margin:0;cursor:pointer;
  border-bottom:1px solid color-mix(in oklch,var(--brown-200) 18%,transparent);
}
.mbc-label{display:flex;flex-direction:column;gap:2px}
.mbc-label b{font-weight:700;color:var(--brown-150)}
.mbc-label small{font-size:12.5px;line-height:1.45;color:var(--aqua-250)}
.mbc-gpc{margin:10px 0 0;font-size:12.5px;color:var(--brown-250)}
.mbc-gpc[hidden]{display:none}

/* Toggle switch built from the native checkbox, so keyboard and screen
   readers behave with no extra script. */
.mbc-switch{
  appearance:none;-webkit-appearance:none;flex:none;margin:0;
  width:40px;height:23px;border-radius:999px;position:relative;cursor:pointer;
  background:var(--aqua-350);
  border:1px solid color-mix(in oklch,var(--brown-200) 25%,transparent);
  transition:background .2s ease;
}
.mbc-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--aqua-200);transition:transform .2s ease,background .2s ease;
}
.mbc-switch:checked{background:var(--brown-250)}
.mbc-switch:checked::after{transform:translateX(17px);background:var(--aqua-500)}
.mbc-switch:disabled{opacity:.55;cursor:not-allowed}
.mbc-switch:focus-visible{outline:2px solid var(--brown-250);outline-offset:2px}

.mbc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mbc-btn{
  flex:1 1 auto;margin:0;padding:10px 14px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;white-space:nowrap;
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.mbc-btn[hidden]{display:none}
.mbc-gold{background:var(--brown-250);color:var(--aqua-500)}
.mbc-gold:hover{background:var(--brown-150)}
.mbc-ghost{background:transparent;color:var(--brown-150);border-color:color-mix(in oklch,var(--brown-200) 30%,transparent)}
.mbc-ghost:hover{border-color:var(--brown-250);color:var(--brown-250)}
.mbc-btn:focus-visible{outline:2px solid var(--brown-250);outline-offset:2px}

@media (max-width:560px){
  .mbc{left:16px;right:16px;bottom:16px;width:auto;padding:18px 18px 16px}
}

@media (prefers-reduced-motion:reduce){
  .mbc,.mbc-switch,.mbc-switch::after{transition:none}
}