/*
  RealityDriven consent theme.
  Loaded after Silktide's vendor CSS so the consent UI inherits the site system.
*/

#stcm-wrapper {
  --boxShadow: 0 28px 80px oklch(20% 0.02 255 / .16);
  --fontFamily: var(--font-body, "IBM Plex Sans", "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif);
  --primaryColor: var(--signal, var(--orange, oklch(67% 0.22 38)));
  --backgroundColor: var(--paper-2, oklch(98.4% 0.008 78));
  --textColor: var(--ink, oklch(11.5% 0.006 255));
  --backdropBackgroundColor: oklch(11.5% 0.006 255 / .34);
  --backdropBackgroundBlur: 0px;
  --iconColor: var(--paper-2, oklch(98.4% 0.008 78));
  --iconBackgroundColor: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-wrapper a {
  color: var(--ink, oklch(11.5% 0.006 255));
  text-decoration-color: var(--line-dark, oklch(72% 0.012 78));
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

#stcm-wrapper a:hover {
  color: var(--signal-dark, var(--orange-dark, oklch(58% 0.2 38)));
}

#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--paper-2, oklch(98.4% 0.008 78)), 0 0 0 4px var(--signal, oklch(67% 0.22 38));
}

#stcm-wrapper .stcm-button {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--ink, oklch(11.5% 0.006 255));
  border-radius: 0;
  font-family: var(--font-label, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: background-color 180ms var(--ease, ease), border-color 180ms var(--ease, ease), color 180ms var(--ease, ease), transform 180ms var(--ease, ease);
}

#stcm-wrapper .stcm-button-primary {
  background-color: var(--signal, var(--orange, oklch(67% 0.22 38)));
  color: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-wrapper .stcm-button-primary:hover {
  background-color: var(--signal-dark, var(--orange-dark, oklch(58% 0.2 38)));
  border-color: var(--signal-dark, var(--orange-dark, oklch(58% 0.2 38)));
  color: var(--paper-2, oklch(98.4% 0.008 78));
  transform: translateY(-1px);
}

#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-modal-reject-all {
  background-color: transparent;
  color: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-modal-reject-all:hover {
  background-color: var(--ink, oklch(11.5% 0.006 255));
  border-color: var(--ink, oklch(11.5% 0.006 255));
  color: var(--paper-2, oklch(98.4% 0.008 78));
}

#stcm-wrapper .stcm-button-secondary {
  background-color: transparent;
  color: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-wrapper .stcm-button-secondary:hover {
  background-color: var(--ink, oklch(11.5% 0.006 255));
  color: var(--paper-2, oklch(98.4% 0.008 78));
}

#stcm-banner {
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(536px, calc(100vw - 40px));
  max-height: min(640px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark, oklch(72% 0.012 78));
  border-radius: 0;
  background:
    linear-gradient(90deg, oklch(11.5% 0.006 255 / .055) 1px, transparent 1px),
    linear-gradient(180deg, oklch(11.5% 0.006 255 / .04) 1px, transparent 1px),
    var(--paper-2, oklch(98.4% 0.008 78));
  background-size: 28px 28px;
  box-shadow: var(--boxShadow);
}

#stcm-banner::before {
  content: "Privacy Preferences";
  display: block;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--line, oklch(83% 0.012 78));
  background: color-mix(in oklch, var(--paper, oklch(96.8% 0.012 78)) 88%, var(--signal, oklch(67% 0.22 38)) 12%);
  color: var(--ink, oklch(11.5% 0.006 255));
  font-family: var(--font-label, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#stcm-banner p {
  margin: 0;
  padding: 18px 18px 0;
  color: var(--text, oklch(28% 0.01 255));
  font-size: .94rem;
  line-height: 1.55;
}

#stcm-banner p + p {
  padding-top: 12px;
}

#stcm-banner a {
  background-color: transparent;
  color: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-banner .stcm-actions {
  gap: 14px;
  margin-top: 18px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line, oklch(83% 0.012 78));
  background: oklch(96.8% 0.012 78 / .78);
}

#stcm-banner .stcm-actions-row {
  gap: 12px;
}

#stcm-banner .stcm-preferences-button {
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--ink, oklch(11.5% 0.006 255));
  font-family: var(--font-label, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#stcm-banner .stcm-preferences-button svg {
  width: 18px;
  height: 18px;
  fill: var(--signal-dark, var(--orange-dark, oklch(58% 0.2 38)));
}

#stcm-banner .stcm-preferences-button span {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-dark, oklch(72% 0.012 78));
  text-underline-offset: 5px;
}

#stcm-banner .stcm-preferences-button:hover span {
  color: var(--signal-dark, var(--orange-dark, oklch(58% 0.2 38)));
}

#stcm-banner a.stcm-logo {
  width: 38px;
  height: 38px;
  margin-left: auto;
  opacity: .5;
  transition: opacity 180ms var(--ease, ease);
}

#stcm-banner a.stcm-logo:hover {
  opacity: .9;
}

#stcm-banner a.stcm-logo svg {
  width: 28px;
  height: 28px;
  fill: var(--muted, oklch(48% 0.01 255));
}

#stcm-modal {
  width: min(820px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-dark, oklch(72% 0.012 78));
  border-radius: 0;
  background: var(--paper-2, oklch(98.4% 0.008 78));
  box-shadow: var(--boxShadow);
}

#stcm-modal header {
  gap: 18px;
  margin: 0;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line, oklch(83% 0.012 78));
  background: color-mix(in oklch, var(--paper, oklch(96.8% 0.012 78)) 90%, var(--signal, oklch(67% 0.22 38)) 10%);
}

#stcm-modal h1 {
  color: var(--ink, oklch(11.5% 0.006 255));
  font-family: var(--font-display, "IBM Plex Sans", "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.08;
}

#stcm-modal .stcm-modal-close {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--line-dark, oklch(72% 0.012 78));
  background: var(--paper-2, oklch(98.4% 0.008 78));
  color: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-modal .stcm-modal-close:hover {
  background: var(--ink, oklch(11.5% 0.006 255));
  color: var(--paper-2, oklch(98.4% 0.008 78));
}

#stcm-modal .stcm-modal-close svg {
  fill: currentColor;
}

#stcm-modal section {
  margin: 0;
  padding: 24px;
  overflow: auto;
}

#stcm-modal section::-webkit-scrollbar {
  width: 8px;
}

#stcm-modal section::-webkit-scrollbar-thumb {
  border: 2px solid var(--paper-2, oklch(98.4% 0.008 78));
  border-radius: 999px;
  background-color: var(--line-dark, oklch(72% 0.012 78));
}

#stcm-modal p {
  color: var(--text, oklch(28% 0.01 255));
  font-size: .96rem;
  line-height: 1.58;
  opacity: 1;
}

#stcm-modal fieldset {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line, oklch(83% 0.012 78));
}

#stcm-modal fieldset:first-of-type {
  margin-top: 24px;
}

#stcm-modal legend {
  margin-bottom: 8px;
  color: var(--ink, oklch(11.5% 0.006 255));
  font-family: var(--font-label, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
}

#stcm-modal .stcm-consent-description {
  max-width: 58ch;
  color: var(--text, oklch(28% 0.01 255));
  font-size: .93rem;
  line-height: 1.5;
}

#stcm-modal .stcm-consent-row {
  gap: 22px;
  align-items: center;
}

#stcm-modal .stcm-toggle {
  width: 70px;
  height: 34px;
}

#stcm-modal .stcm-toggle:focus-within {
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--paper-2, oklch(98.4% 0.008 78)), 0 0 0 4px var(--signal, oklch(67% 0.22 38));
}

#stcm-modal .stcm-toggle-track {
  width: 70px;
  height: 34px;
  border: 1px solid var(--line-dark, oklch(72% 0.012 78));
  background: var(--paper, oklch(96.8% 0.012 78));
}

#stcm-modal .stcm-toggle-thumb {
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  background: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-modal .stcm-toggle-off,
#stcm-modal .stcm-toggle-on {
  top: 10px;
  color: var(--ink, oklch(11.5% 0.006 255));
  font-family: var(--font-label, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  font-size: .58rem;
  font-weight: 650;
  letter-spacing: .06em;
}

#stcm-modal .stcm-toggle input:checked + .stcm-toggle-track {
  border-color: var(--signal-dark, var(--orange-dark, oklch(58% 0.2 38)));
  background: var(--signal, var(--orange, oklch(67% 0.22 38)));
}

#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-thumb {
  left: calc(100% - 30px);
  background: var(--paper-2, oklch(98.4% 0.008 78));
}

#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-off {
  right: calc(100% - 30px);
}

#stcm-modal .stcm-toggle input:checked ~ .stcm-toggle-on {
  right: calc(100% - 31px);
}

#stcm-modal .stcm-toggle input:disabled + .stcm-toggle-track {
  opacity: .55;
  filter: saturate(.25);
}

#stcm-modal footer {
  gap: 12px;
  margin-top: 0;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--line, oklch(83% 0.012 78));
  background: var(--paper, oklch(96.8% 0.012 78));
}

#stcm-modal footer a {
  color: var(--muted, oklch(48% 0.01 255));
  font-family: var(--font-label, "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace);
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#stcm-icon {
  right: 16px;
  bottom: 16px;
  left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-dark, oklch(72% 0.012 78));
  border-radius: 0;
  background-color: var(--paper-2, oklch(98.4% 0.008 78));
  box-shadow: 0 12px 34px oklch(20% 0.02 255 / .14);
}

#stcm-wrapper #stcm-icon:focus {
  border-radius: 0;
}

#stcm-icon svg {
  width: 25px;
  height: 25px;
  fill: var(--ink, oklch(11.5% 0.006 255));
}

#stcm-backdrop {
  background-color: var(--backdropBackgroundColor);
  backdrop-filter: blur(var(--backdropBackgroundBlur));
}

@media (max-width: 640px) {
  #stcm-banner {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
  }

  #stcm-banner::before {
    padding: 13px 15px 11px;
  }

  #stcm-banner p {
    padding-right: 15px;
    padding-left: 15px;
    font-size: .9rem;
  }

  #stcm-banner .stcm-actions {
    padding: 15px;
  }

  #stcm-banner .stcm-actions,
  #stcm-banner .stcm-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  #stcm-banner a.stcm-logo {
    margin: 0;
    align-self: flex-end;
  }

  #stcm-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  #stcm-modal header,
  #stcm-modal section,
  #stcm-modal footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  #stcm-modal .stcm-consent-row {
    align-items: flex-start;
  }

  #stcm-modal footer {
    flex-direction: column;
  }

  #stcm-modal footer a {
    margin-left: 0;
  }
}