/* Measurebase - cookie consent banner.
   Split out of home.css so pages on the OLDER style.css (login, signup) can
   have the banner too. home.css @imports this file, so the marketing pages
   are unchanged and there is exactly one copy of these rules.

   The token block below is why this is not a plain extraction. These rules
   were written against home.css's design tokens, and style.css defines
   almost none of them -- var(--ink) with nothing behind it is an invalid
   value, not a fallback, so the banner would have rendered as unstyled
   boxes on the auth pages. The values are copied verbatim from home.css's
   :root and are scoped to the banner's own roots rather than redeclared at
   :root, so linking this file can never restyle the page around it. */

.cc,
.cc-tab,
.link-btn {
  --accent: #0071e3;
  --accent-deep: #0058b0;
  --accent-hover: #0077ed;
  --ink: #17181a;
  --ink-faint: #8a8d93;
  --ink-soft: #55585e;
  --line: #e6e6e0;
  --line-strong: #d8d8d1;
  --paper-deep: #f3f3ef;
  --r-lg: 22px;
  --shadow-card: 0 1px 2px rgba(23, 24, 26, 0.04), 0 12px 32px rgba(23, 24, 26, 0.05);
  --shadow-float: 0 2px 6px rgba(23, 24, 26, 0.05), 0 32px 80px rgba(23, 24, 26, 0.10);
  --white: #ffffff;
}

/* ---------- Cookie consent banner (rendered by js/site.js) ---------- */

.cc {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 900;
  max-width: 420px;
  width: calc(100% - 40px);
}

.cc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: 22px 24px 18px;
}

.cc-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; }
.cc-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 16px; }
.cc-body a { color: var(--accent-deep); font-weight: 500; }

/* Accept and reject sit in one row at the same width, weight and size. Only
   the fill differs. A reject button that is smaller, greyer or one tap
   further away than accept is the single most common way a banner fails an
   AP/EDPB review, so the symmetry here is deliberate, not cosmetic. */
.cc-actions { display: flex; gap: 10px; }
.cc-expanded .cc-actions { flex-direction: column; }
.cc-btn {
  flex: 1 1 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 980px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Both are solid, same size, same radius, same weight -- they differ only in
   hue. An outlined "reject" next to a filled "accept" is still the most
   commonly cited nudge in AP and EDPB decisions, and it is not worth
   defending on a site that sells consent-correct tagging. */
.cc-primary { background: var(--accent); color: #fff; }
.cc-primary:hover { background: var(--accent-hover); }
.cc-secondary { background: var(--ink); color: #fff; }
.cc-secondary:hover { background: #2c2e32; }
/* "Save choices" is not part of the accept/reject pair, so it is deliberately
   the one button that does NOT match them: with all three solid, the two
   black ones read as the same action. Outlining it keeps the pair above
   equal to each other, which is the part that has to hold up. */
.cc-tertiary { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.cc-tertiary:hover { background: var(--paper-deep); }
.cc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cc-link {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 0;
  padding: 4px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
}
.cc-link:hover { color: var(--ink-soft); }

.cc-prefs { margin: 0 0 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.cc-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.cc-row-locked { cursor: default; opacity: 0.72; }
.cc-row input { margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.cc-row strong { display: inline; font-size: 13px; font-weight: 650; color: var(--ink); }
.cc-always {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-left: 8px;
}
.cc-help { display: block; font-size: 12px; line-height: 1.45; color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 640px) {
  .cc { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; }
  .cc-card { padding: 18px 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-btn { transition: none; }
}

/* An inline <button> that has to read as body-copy link: used in the privacy
   policy to reopen the consent banner. A real <button> rather than an <a>
   because it performs an action and goes nowhere -- but it must not look like
   a form control in the middle of a sentence. */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent); }

/* The persistent re-entry point, shown only after a choice exists. Sits in
   the same corner the card uses, and only one of the two is ever mounted. */
.cc-tab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 899;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px 9px 12px;
  border-radius: 980px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-card);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cc-tab svg { width: 17px; height: 17px; flex: none; color: var(--ink-faint); }
.cc-tab:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.cc-tab:hover svg { color: var(--accent); }
.cc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .cc-tab { left: 10px; bottom: 10px; padding: 8px 13px 8px 10px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-tab { transition: none; }
  .cc-tab:hover { transform: none; }
}

/* Dismiss control, present only on the reopened banner (see build() in
   js/site.js -- the first showing deliberately has no way past it). */
.cc-card { position: relative; }
.cc-dismissable .cc-title { padding-right: 30px; }
.cc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-close svg { width: 15px; height: 15px; pointer-events: none; }
.cc-close:hover { background: var(--paper-deep); color: var(--ink); }
.cc-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cc-close { transition: none; }
}