/* ==========================================================================
   Cookie notice (js/consent.js) — the one component that has to look the same
   on marzi.ai, on the sign-in page and inside the cabinet. Those three load
   different stylesheets (site.css vs tokens.css), so this sheet carries its
   own values on .mcons instead of borrowing either set, and nothing outside
   .mcons is touched.

   It is a notice, not a wall: no full-page scrim, the page stays readable and
   scrollable behind it. Accept and reject are the same button, same size,
   same colour — a refusal that looks weaker than a consent is not a free
   choice, and that is what regulators fine.
   ========================================================================== */
.mcons{
  --mc-ground:#ffffff;
  --mc-ink:#5a3d2b;
  --mc-muted:#8a7565;
  --mc-line:#f0e2d6;
  --mc-brand:#5b45e0;
  --mc-brand-hover:#4936c4;
  --mc-on-brand:#ffffff;
  --mc-row:#fff7f2;
  --mc-off:#d9c7b8;
  --mc-shadow:0 12px 32px rgba(90,61,43,.18);
  --mc-font:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mc-display:"Baloo 2","Nunito",-apple-system,BlinkMacSystemFont,sans-serif;

  position:fixed;z-index:9000;left:16px;bottom:16px;width:min(420px,calc(100vw - 32px));
  font-family:var(--mc-font);color:var(--mc-ink);
}
.mcons[hidden]{display:none;}

.mcons__card{
  background:var(--mc-ground);border:1px solid var(--mc-line);border-radius:18px;
  box-shadow:var(--mc-shadow);padding:20px;
}
/* Three categories are taller than a short laptop window, so the card scrolls
   its rows and keeps the two buttons in view. A "save" that has to be found by
   scrolling is not an equally easy choice. */
.mcons__card--panel{
  max-height:min(78vh,620px);display:flex;flex-direction:column;overflow:hidden;
}
.mcons__rows{overflow:auto;min-height:0;margin:0 -2px;padding:0 2px;}
.mcons__foot{flex:0 0 auto;padding-top:4px;}

.mcons__h{
  margin:0 0 6px;font-family:var(--mc-display);font-weight:800;font-size:19px;line-height:1.25;
}
.mcons__p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--mc-muted);font-weight:500;}
.mcons__a{color:var(--mc-brand);font-weight:700;text-decoration:underline;}

/* two decisions, one shape */
.mcons__acts{display:flex;gap:8px;flex-wrap:wrap;}
.mcons__btn{
  flex:1 1 140px;min-height:44px;padding:11px 16px;border:0;border-radius:12px;cursor:pointer;
  background:var(--mc-brand);color:var(--mc-on-brand);
  font-family:var(--mc-font);font-size:15px;font-weight:800;line-height:1.2;
}
.mcons__btn:hover{background:var(--mc-brand-hover);}
.mcons__btn:focus-visible{outline:2px solid var(--mc-ink);outline-offset:2px;}

.mcons__link{
  display:block;margin:12px auto 0;padding:6px 4px;border:0;background:none;cursor:pointer;
  font-family:var(--mc-font);font-size:13px;font-weight:700;color:var(--mc-muted);
  text-decoration:underline;
}
.mcons__link:hover{color:var(--mc-ink);}
.mcons__link:focus-visible{outline:2px solid var(--mc-brand);outline-offset:2px;border-radius:6px;}

/* a category: what it is, whether it is on, what it does */
.mcons__row{background:var(--mc-row);border:1px solid var(--mc-line);border-radius:14px;padding:12px 14px;margin:0 0 10px;}
.mcons__row-t{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mcons__row-h{font-size:14px;font-weight:800;}
.mcons__row-p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--mc-muted);font-weight:500;}
.mcons__state{font-size:12px;font-weight:800;color:var(--mc-muted);text-transform:uppercase;letter-spacing:.04em;}

.mcons__sw{
  flex:0 0 auto;width:46px;height:26px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--mc-off);position:relative;transition:background .15s ease;
}
.mcons__sw[aria-checked="true"]{background:var(--mc-brand);}
.mcons__sw-k{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease;
}
.mcons__sw[aria-checked="true"] .mcons__sw-k{transform:translateX(20px);}
.mcons__sw:focus-visible{outline:2px solid var(--mc-ink);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .mcons__sw,.mcons__sw-k{transition:none;}
}

/* the phone: the card takes the width and sits above the tab bar */
@media (max-width:620px){
  .mcons{left:8px;right:8px;bottom:8px;width:auto;}
  .mcons__card{padding:16px;border-radius:16px;}
  .mcons__btn{flex:1 1 100%;}
}
@media (max-width:860px){
  /* the cabinet's phone shell owns the bottom edge: the tab bar is fixed
     there (components.css, "PHONE SHELL"), so the notice sits above it */
  html[data-phone] .mcons{bottom:calc(8px + var(--h-tabbar, 64px) + var(--safe-b, 0px));}
  html[data-phone][data-deep] .mcons{bottom:8px;}
}

/* The cabinet has a dark theme; the public site does not, so the system
   preference alone must not darken a light page — only a page that declares
   a theme follows it. */
:root[data-theme="dark"] .mcons{
  --mc-ground:#2e284d;
  --mc-ink:#f4eee8;
  --mc-muted:#c9bcd6;
  --mc-line:#443c63;
  --mc-row:#241f3d;
  --mc-off:#5b5278;
  --mc-shadow:0 12px 32px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark){
  :root[data-theme]:not([data-theme="light"]) .mcons{
    --mc-ground:#2e284d;
    --mc-ink:#f4eee8;
    --mc-muted:#c9bcd6;
    --mc-line:#443c63;
    --mc-row:#241f3d;
    --mc-off:#5b5278;
    --mc-shadow:0 12px 32px rgba(0,0,0,.45);
  }
}