/* ==========================================================
   SONOMA CONSENT DIALOG — PIXEL-SCALE VERSION
   Reference canvas: 1536 × 960
   Reference dialog: 442 × 194 px
   All important geometry is editable in the variables below.
========================================================== */

:root {
  /* Card */
  --consent-width: 442px;
  --consent-height: 179px;
  --consent-radius: 8px;
  --consent-bg: var(--sonoma-titlebar-surface, rgba(68, 66, 71, 0.88));
  --consent-border: rgba(255, 255, 255, 0.07);
  --consent-shadow:
    0 8px 22px rgba(0, 0, 0, 0.24),
    0 1px 3px rgba(0, 0, 0, 0.20);

  /* Card insets and columns */
  --consent-padding-top: 22px;
  --consent-padding-right: 19px;
  --consent-padding-bottom: 15px;
  --consent-padding-left: 22px;
  --consent-column-gap: 24px;

  /* Icon */
  --consent-icon-size: 110px;
  --consent-icon-top: 0px;

  /* Typography */
  --consent-title-size: 13px;
  --consent-title-weight: 600;
  --consent-title-line-height: 15px;
  --consent-title-letter-spacing: -0.12px;
  --consent-device-size: 11px;
  --consent-device-weight: 700;
  --consent-device-line-height: 13px;
  --consent-row-size: 11px;
  --consent-row-weight: 450;

  /* Vertical rhythm */
  --consent-title-top: 7px;
  --consent-title-bottom: 9px;
  --consent-device-bottom: 6px;
  --consent-check-row-gap: 6px;

  /* Checkbox */
  --consent-check-size: 12px;
  --consent-check-radius: 3px;
  --consent-check-gap: 7px;
  --consent-accent: var(--accent);
  --consent-check-off: rgba(112, 112, 113, 0.72);

  /* Buttons */
  --consent-button-height: 21px;
  --consent-button-radius: 5px;
  --consent-button-font-size: 11px;
  --consent-button-weight: 540;
  --consent-button-gap: 10px;
  --consent-button-padding-x: 8px;
}

/* Fullscreen camera image */
.remote-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: rgba(15, 15, 17, .08);
  -webkit-backdrop-filter: blur(10px) saturate(.86) brightness(.72);
  backdrop-filter: blur(10px) saturate(.86) brightness(.72);
  opacity: 1;
  transition:
    opacity 380ms ease,
    transform 560ms cubic-bezier(.18, .88, .28, 1.08),
    filter 380ms ease;
}

.remote-intro.is-leaving {
  opacity: 0;
  transform: scale(1.035);
  filter: blur(12px);
  pointer-events: none;
}

.remote-dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 18, .12);
  box-shadow: none;
}

/* The reference image contains no visible traffic lights on this screen. */
.remote-preview-lights {
  display: none !important;
}

/* Consent card */
#consent-dialog.consent-dialog {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--consent-width);
  height: var(--consent-height);
  min-width: 0;
  min-height: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  display: grid;
  grid-template-columns: var(--consent-icon-size) minmax(0, 1fr);
  column-gap: var(--consent-column-gap);
  padding:
    var(--consent-padding-top)
    var(--consent-padding-right)
    var(--consent-padding-bottom)
    var(--consent-padding-left);
  overflow: hidden;
  border: 1px solid var(--consent-border);
  border-radius: var(--consent-radius);
  color: rgba(255, 255, 255, .97);
  background: var(--consent-bg);
  box-shadow: var(--consent-shadow);
  -webkit-backdrop-filter: blur(28px) saturate(112%);
  backdrop-filter: blur(28px) saturate(112%);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif;
  animation: consentPop 220ms cubic-bezier(.2, .85, .3, 1) both;
}

.remote-intro.is-shaking #consent-dialog {
  animation: consentShake 380ms ease both;
}

@keyframes consentShake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 6px), -50%); }
  75% { transform: translate(calc(-50% + 6px), -50%); }
}

@keyframes consentPop {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 4px)) scale(.987);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.consent-icon-wrap {
  width: var(--consent-icon-size);
  height: var(--consent-icon-size);
  align-self: start;
  justify-self: start;
  margin-top: var(--consent-icon-top);
  display: grid;
  place-items: center;
}

.consent-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.consent-content {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.consent-title {
  margin: var(--consent-title-top) 0 var(--consent-title-bottom);
  color: rgba(255, 255, 255, .98);
  font-size: var(--consent-title-size);
  line-height: var(--consent-title-line-height);
  font-weight: var(--consent-title-weight);
  letter-spacing: var(--consent-title-letter-spacing);
}

.consent-device {
  margin: 0 0 var(--consent-device-bottom);
  color: rgba(255, 255, 255, .98);
  font-size: var(--consent-device-size);
  line-height: var(--consent-device-line-height);
  font-weight: var(--consent-device-weight);
  letter-spacing: -0.05px;
}

.consent-checks {
  display: grid;
  gap: var(--consent-check-row-gap);
  margin: 0;
}

.consent-check-row {
  width: max-content;
  display: flex;
  align-items: center;
  gap: var(--consent-check-gap);
  color: rgba(255, 255, 255, .96);
  font-size: var(--consent-row-size);
  line-height: 12px;
  font-weight: var(--consent-row-weight);
  letter-spacing: -0.04px;
  cursor: default;
}

.consent-check-control {
  width: var(--consent-check-size);
  height: var(--consent-check-size);
  display: inline-flex;
  flex: 0 0 var(--consent-check-size);
  cursor: pointer;
}

.consent-privacy-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.consent-privacy-link:hover {
  color: #fff;
}

.remote-intro > .intro-legal-window {
  z-index: 100 !important;
}

.remote-intro > .intro-legal-window.maximized {
  transform: none !important;
}

.consent-native-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.consent-fake-check {
  position: relative;
  box-sizing: border-box;
  width: var(--consent-check-size);
  height: var(--consent-check-size);
  flex: 0 0 var(--consent-check-size);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: var(--consent-check-radius);
  background: var(--consent-check-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}

.consent-native-check:checked + .consent-fake-check {
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #67a7ff, var(--consent-accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 1px rgba(0, 0, 0, .18);
}

.consent-native-check:checked + .consent-fake-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.consent-buttons {
  margin-top: auto;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--consent-button-gap);
}

.consent-button {
  box-sizing: border-box;
  min-width: 0;
  height: var(--consent-button-height);
  padding: 0 var(--consent-button-padding-x);
  border: 0;
  border-radius: var(--consent-button-radius);
  font-family: inherit;
  font-size: var(--consent-button-font-size);
  line-height: 1;
  font-weight: var(--consent-button-weight);
  letter-spacing: -0.06px;
  cursor: default;
  transition: transform 100ms ease, filter 100ms ease, opacity 120ms ease;
}

.consent-button:active {
  transform: scale(.97);
}

.consent-button.secondary {
  color: #171717;
  background: linear-gradient(180deg, #fff, #ececec);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .75);
}

.consent-button.primary {
  color: #fff;
  background: linear-gradient(180deg, #67a7ff, var(--consent-accent));
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}

.consent-button:disabled {
  opacity: .45;
  filter: grayscale(.35);
}

body.intro-active #desktop {
  filter: blur(7px) brightness(.74);
  transform-origin: top left;
}

body:not(.intro-active) #desktop {
  animation: desktopArrive 650ms cubic-bezier(.18, 1.16, .25, 1) both;
}

@keyframes desktopArrive {
  0% { filter: blur(12px) brightness(.68); }
  100% { filter: blur(0) brightness(1); }
}

/* Keep the real 442 × 194 size until the viewport is genuinely too narrow. */
@media (max-width: 490px) {
  #consent-dialog.consent-dialog {
    width: calc(100vw - 24px);
    height: auto;
    min-height: 179px;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    padding-left: 16px;
    padding-right: 14px;
  }

  .consent-icon-wrap {
    width: 92px;
    height: 92px;
  }
}