/* Cookie banner + preferences. Bottom-right, deliberately not a full-screen wall:
   a banner that blocks the page until you agree is coercive, and coerced consent is
   not consent. It stays out of the way and can be answered at leisure. */

.mg-consent{
  position:fixed; right:20px; bottom:20px; z-index:9000;
  width:min(400px, calc(100vw - 40px));
  background:var(--l-s2); color:var(--l-ink);
  border:1px solid rgb(var(--l-line-rgb) / .12); border-radius:14px;
  padding:20px 22px; box-shadow:0 24px 64px rgb(var(--l-bg-rgb) / .55);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:14px;
  animation:mgConsentIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes mgConsentIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .mg-consent{animation:none} }

.mg-consent-title{ font-size:15.5px; font-weight:700; margin-bottom:7px; }
.mg-consent-body{ margin:0 0 10px; font-size:13.2px; line-height:1.55; color:rgb(var(--l-ink-rgb) / .66); }
.mg-consent-link{ font-size:13px; color:var(--l-accent); text-decoration:underline; }
.mg-consent-link:hover{ color:var(--l-accent-hi); }

.mg-consent-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mg-consent-btn{
  flex:1 1 auto; min-width:112px; padding:10px 14px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600;
  background:rgb(var(--l-line-rgb) / .07); color:var(--l-ink); border:1px solid rgb(var(--l-line-rgb) / .16);
  transition:background .14s, border-color .14s;
}
.mg-consent-btn:hover{ background:rgb(var(--l-line-rgb) / .12); border-color:rgb(var(--l-line-rgb) / .28); }
.mg-consent-btn:focus-visible{ outline:2px solid var(--l-accent); outline-offset:2px; }
/* Accept is tinted, but reject has identical size, weight and hit area — the visual
   difference must not amount to nudging. */
.mg-consent-primary{ background:linear-gradient(135deg,var(--l-accent),var(--l-accent-lo)); color:var(--l-on-accent,#0a0c0e); border-color:transparent; }
.mg-consent-primary:hover{ filter:brightness(1.06); background:linear-gradient(135deg,var(--l-accent),var(--l-accent-lo)); }
.mg-consent-ghost{ flex:1 1 100%; background:none; border-color:rgb(var(--l-line-rgb) / .10); color:rgb(var(--l-ink-rgb) / .62); }

/* --- preferences dialog --- */
.mg-prefs-veil{
  position:fixed; inset:0; z-index:9100; background:rgb(var(--l-bg-rgb) / .82);
  backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:22px;
}
.mg-prefs-card{
  position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--l-s2); color:var(--l-ink); border:1px solid rgb(var(--l-line-rgb) / .12);
  border-radius:16px; padding:30px 30px 24px; box-shadow:0 30px 80px rgb(var(--l-bg-rgb) / .6);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.mg-prefs-title{ font-size:20px; font-weight:700; margin-bottom:6px; }
.mg-prefs-sub{ margin:0 0 20px; font-size:13.4px; line-height:1.55; color:rgb(var(--l-ink-rgb) / .6); }
.mg-prefs-row{ padding:15px 0; border-top:1px solid rgb(var(--l-line-rgb) / .07); }
.mg-prefs-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mg-prefs-name{ font-size:14.5px; font-weight:650; }
.mg-prefs-desc{ margin:6px 0 0; font-size:13px; line-height:1.5; color:rgb(var(--l-ink-rgb) / .58); }
.mg-prefs-req{ display:inline-block; margin-top:7px; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:rgb(var(--l-ink-rgb) / .38); }
.mg-prefs-toggle{ width:19px; height:19px; accent-color:var(--l-accent); cursor:pointer; flex:none; }
.mg-prefs-toggle:disabled{ cursor:not-allowed; opacity:.55; }
.mg-prefs-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.mg-prefs-close{
  position:absolute; top:14px; right:16px; background:none; border:none; cursor:pointer;
  color:rgb(var(--l-ink-rgb) / .4); font-size:16px; padding:6px 9px; border-radius:7px; font-family:inherit;
}
.mg-prefs-close:hover{ color:var(--l-ink); background:rgb(var(--l-line-rgb) / .07); }

@media (max-width:520px){
  .mg-consent{ right:12px; left:12px; bottom:12px; width:auto; }
  .mg-consent-btn{ flex:1 1 100%; }
}