/* Cookie consent (CookieYes banner and preference center).
 *
 * CookieYes styles its own banner from its CDN bundle, using the palette
 * configured in the CookieYes dashboard: #0093FF fills and 2px radii, the
 * pre-2026 blue that no Mathpix property uses any more. These rules restate
 * the banner and the preference center in the 2026 brand. Every declaration
 * needs !important because the vendor stylesheet is injected after this one
 * and targets the same single-class selectors.
 *
 * This file is duplicated verbatim in accounts/, console-web/, grapher/ and
 * snip-web/ — the four properties that serve the CookieYes tag but share no
 * token layer, and each of which builds from its own Docker context (see
 * `context:` in docker-compose.dev.yml), so there is nowhere above them to put
 * one shared import. Keep the four copies byte-identical:
 *
 *   md5sum accounts/src/assets/stylesheets/_cookie_banner.scss \
 *          snip-web/src/assets/stylesheets/_cookie_banner.scss \
 *          console-web/app/cookie-banner.css grapher/assets/css/cookie-banner.css
 *
 * mathpix.com expresses the same design in its own tokens, in the "Cookie
 * consent" block of website/src/pages/css/main.scss — change both together.
 * Every value below is that block's token resolved: the names here map one to
 * one onto the website's, so a change there transfers mechanically. The ramp
 * lives in the :root of that same file, NOT in docs/design-tokens.scss, which
 * still carries the pre-2026 blue. The --cky- prefix keeps these names out of
 * each host app's token namespace.
 */
:root {
  /* --font-body and --font-heading on the website; the same stack today, kept
     apart here so a heading-font change there still maps one to one. */
  --cky-font: 'Saans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cky-font-heading: 'Saans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Brand TEAL. Decorative only at 3.85:1 on white — fills, borders, focus rings. */
  --cky-teal: #0a918d;
  /* Teal step 800, 7.5:1 on white: carries white button labels and link text. */
  --cky-teal-text: #065f5c;
  /* Teal step 700, 6.08:1 on white. */
  --cky-teal-hover: #076e6b;
  --cky-teal-light: #e9fef5;
  --cky-white: #ffffff;
  --cky-neutral-100: #f2f2f2;
  --cky-neutral-200: #e5e5e5;
  --cky-neutral-300: #cccccc;
  --cky-neutral-500: #666666;
  --cky-neutral-600: #4d4d4d;
  --cky-neutral-700: #333333;
  --cky-neutral-900: #000000;
}
.cky-consent-container, .cky-modal { font-family: var(--cky-font) !important; }
.cky-consent-container .cky-consent-bar {
  background: var(--cky-white) !important;
  border: none !important;
  border-top: 1px solid var(--cky-neutral-200) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 20px 24px !important;
}
.cky-consent-bar .cky-notice { max-width: 1200px; margin: 0 auto; }
.cky-notice .cky-title {
  font-family: var(--cky-font-heading) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--cky-neutral-900) !important;
  margin: 0 0 6px !important;
}
.cky-notice-des, .cky-notice-des * { color: var(--cky-neutral-600) !important; font-size: 0.9375rem !important; line-height: 1.55 !important; }
.cky-notice-btn-wrapper { margin-left: 24px !important; gap: 12px !important; }
.cky-prefrence-btn-wrapper { gap: 12px !important; }
.cky-btn {
  margin: 0 !important;
  padding: 10px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  transition: background 0.15s, transform 0.1s !important;
}
.cky-btn:hover { filter: none !important; }
.cky-btn:active { transform: scale(0.98); }
.cky-btn-accept, .cky-opt-out-btn-wrapper .cky-btn-confirm { background: var(--cky-teal-text) !important; border-color: var(--cky-teal-text) !important; color: var(--cky-white) !important; }
.cky-btn-accept:hover, .cky-opt-out-btn-wrapper .cky-btn-confirm:hover { background: var(--cky-teal-hover) !important; border-color: var(--cky-teal-hover) !important; }
.cky-btn-reject, .cky-btn-preferences, .cky-opt-out-btn-wrapper .cky-btn-cancel { background: var(--cky-white) !important; border-color: var(--cky-teal) !important; color: var(--cky-teal-text) !important; }
.cky-btn-reject:hover, .cky-btn-preferences:hover, .cky-opt-out-btn-wrapper .cky-btn-cancel:hover { background: var(--cky-teal-light) !important; }
.cky-btn-customize { background: transparent !important; border-color: transparent !important; color: var(--cky-teal-text) !important; }
.cky-btn-customize:hover { background: var(--cky-teal-light) !important; }
.cky-notice-des a.cky-policy, .cky-notice-des a.cky-link-default, .cky-preference-content-wrapper .cky-show-desc-btn {
  color: var(--cky-teal-text) !important;
  border: none !important;
  text-decoration: underline !important;
}
.cky-modal, .cky-modal .cky-preference-center { border-radius: 12px !important; }
.cky-modal { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; }
.cky-preference-center { background: var(--cky-white) !important; border-color: var(--cky-neutral-200) !important; color: var(--cky-neutral-900) !important; }
.cky-preference-header .cky-preference-title {
  font-family: var(--cky-font-heading) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--cky-neutral-900) !important;
}
.cky-preference-content-wrapper, .cky-preference-content-wrapper *, .cky-accordion-header-des, .cky-accordion-header-des * { color: var(--cky-neutral-600) !important; font-size: 0.875rem !important; line-height: 1.55 !important; }
.cky-accordion-header .cky-accordion-btn { font-size: 1rem !important; font-weight: 600 !important; color: var(--cky-neutral-900) !important; }
.cky-accordion-header .cky-always-active { font-size: 0.875rem !important; font-weight: 600 !important; color: var(--cky-teal-text) !important; }
.cky-accordion, .cky-preference-header, .cky-preference-body-wrapper .cky-horizontal-separator { border-color: var(--cky-neutral-200) !important; }
.cky-accordion-chevron { color: var(--cky-neutral-500) !important; }
.cky-audit-table { background: var(--cky-neutral-100) !important; border-color: var(--cky-neutral-200) !important; border-radius: 8px !important; color: var(--cky-neutral-700) !important; }
.cky-switch input[type="checkbox"] { background: var(--cky-neutral-300) !important; }
.cky-switch input[type="checkbox"]:checked { background: var(--cky-teal) !important; }
.cky-footer-wrapper [data-cky-tag="detail-powered-by"] { background: var(--cky-neutral-100) !important; color: var(--cky-neutral-500) !important; border-radius: 0 0 12px 12px !important; }
.cky-btn:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible,
.cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-preference-header .cky-btn-close:focus-visible,
.cky-notice-des a.cky-policy:focus-visible,
.cky-preference-content-wrapper .cky-show-desc-btn:focus-visible { outline: 2px solid var(--cky-teal) !important; outline-offset: 2px !important; }
@media (max-width: 768px) {
  .cky-notice-btn-wrapper { margin-left: 0 !important; margin-top: 16px !important; flex-wrap: wrap; }
}