/* Cookie banner: the site's "Badge card" (chrome.css #consent-panel), mirrored here because chrome.css can't be
   loaded into the preview (the app's tab bar also uses .nav). Keep the two in step.
   Values follow the site in both themes (base.css palette + chrome.css's light and dark --cp-* tokens).
   The glass is 90% opaque, as on the site, so the body text and link stay at 4.5:1 whatever sits behind it. */
#consent-panel {
  /* Site palette (base.css, light or dark) */
  --cp-text: var(--text);
  --cp-muted: var(--muted);
  --cp-accent: var(--accent);
  --cp-on-accent: var(--on-accent);
  --cp-surface: var(--surface);
  --cp-accent-hi: var(--accent-hi);
  /* Glass: chrome.css's light values here, dark below */
  --cp-glass: rgba(255, 255, 255, 0.9);
  --cp-sheen: rgba(236, 232, 251, 0.9);
  --cp-edge: rgba(99, 64, 224, 0.18);
  --cp-hi: rgba(255, 255, 255, 0.6);
  --cp-low: rgba(60, 40, 140, 0.08);
  --cp-drop: rgba(70, 45, 160, 0.22);
  --cp-drop-deep: rgba(70, 45, 160, 0.4);
  --cp-btn: rgba(255, 255, 255, 0.3);
  --cp-btn-hover: rgba(255, 255, 255, 0.5);
  --cp-badge: rgba(99, 64, 224, 0.12);
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  /* Above the preview dock (70), below the first-visit notices (99999) */
  z-index: 8550;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--font-site);
  -webkit-font-smoothing: antialiased;
  color: var(--cp-text);
  background: linear-gradient(155deg, var(--cp-sheen) 0%, var(--cp-glass) 48%, var(--cp-glass) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--cp-edge);
  border-radius: 28px;
  padding: 24px;
  box-shadow:
    inset 0 1px 0 var(--cp-hi),
    inset 0 -1px 0 var(--cp-low),
    0 2px 4px -2px var(--cp-drop),
    0 14px 28px -14px var(--cp-drop),
    0 40px 80px -36px var(--cp-drop-deep);
  display: none;
  gap: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #consent-panel {
    --cp-glass: rgba(28, 24, 42, 0.9);
    --cp-sheen: rgba(33, 28, 51, 0.9);
    --cp-edge: rgba(200, 185, 255, 0.18);
    --cp-hi: rgba(255, 255, 255, 0.14);
    --cp-low: rgba(0, 0, 0, 0.35);
    --cp-drop: rgba(0, 0, 0, 0.5);
    --cp-drop-deep: rgba(0, 0, 0, 0.75);
    --cp-btn: rgba(255, 255, 255, 0.06);
    --cp-btn-hover: rgba(255, 255, 255, 0.12);
    --cp-badge: rgba(167, 139, 250, 0.14);
  }
}
:root[data-theme='dark'] #consent-panel {
  --cp-glass: rgba(28, 24, 42, 0.9);
  --cp-sheen: rgba(33, 28, 51, 0.9);
  --cp-edge: rgba(200, 185, 255, 0.18);
  --cp-hi: rgba(255, 255, 255, 0.14);
  --cp-low: rgba(0, 0, 0, 0.35);
  --cp-drop: rgba(0, 0, 0, 0.5);
  --cp-drop-deep: rgba(0, 0, 0, 0.75);
  --cp-btn: rgba(255, 255, 255, 0.06);
  --cp-btn-hover: rgba(255, 255, 255, 0.12);
  --cp-badge: rgba(167, 139, 250, 0.14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #consent-panel {
    background: var(--cp-surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  #consent-panel {
    background: var(--cp-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
#consent-panel.is-visible {
  display: grid;
}
/* While the banner is up, consent.js sets html.consent-open and --consent-space (the banner's height plus its
   offset). Desktop: extra page padding so the phone mockup can scroll clear of the banner. */
.consent-open body {
  padding-bottom: calc(22px + var(--consent-space, 0px));
}
/* Full-screen app (same breakpoint as responsive.css): the app ends above the banner and the dock sits just above
   it (scrolling if the space is short), so the tab bar and the dock's buttons are never underneath it. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .consent-open #frame-wrap {
    bottom: var(--consent-space, 0px);
  }
  .consent-open #preview-bar {
    top: auto;
    bottom: calc(var(--consent-space, 0px) + 8px);
    transform: none;
    max-height: calc(100% - var(--consent-space, 0px) - 16px);
    overflow-y: auto;
  }
}
#consent-panel .consent-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
#consent-panel .consent-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--cp-badge);
  color: var(--cp-accent);
  display: grid;
  place-items: center;
  font-size: 24px;
}
#consent-panel h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}
#consent-panel p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cp-muted);
}
#consent-panel p a {
  color: var(--cp-accent);
}
#consent-panel .consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Site .btn / .btn-primary / .btn-soft (style.css), scoped to the banner so the app's own buttons are untouched */
#consent-panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s,
    background 0.2s;
}
#consent-panel .btn:active {
  transform: scale(0.97);
}
#consent-panel .btn-primary {
  color: var(--cp-on-accent);
  background: linear-gradient(180deg, var(--cp-accent-hi), var(--cp-accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 10px 24px -12px var(--cp-accent);
}
#consent-panel .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 16px 30px -12px var(--cp-accent);
}
#consent-panel .btn-soft {
  color: var(--cp-text);
  background: var(--cp-btn);
  border: 1px solid var(--cp-edge);
  box-shadow:
    inset 0 1px 0 var(--cp-hi),
    0 2px 6px -3px var(--cp-drop);
}
#consent-panel .btn-soft:hover {
  background: var(--cp-btn-hover);
  border-color: var(--cp-accent);
}
/* Site focus ring (style.css :focus-visible) */
#consent-panel :focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 3px;
}
/* Forced colours drop the gradient, so keep a button outline */
@media (forced-colors: active) {
  #consent-panel .btn-primary {
    border: 1px solid ButtonText;
  }
}
@media (max-width: 600px) {
  /* Floats as a card with 16px around it, kept clear of the home bar and any side insets. */
  #consent-panel {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    border-radius: 24px;
    padding: 18px;
    gap: 14px;
  }
  /* Badge sits beside the heading; the text runs full width below. */
  #consent-panel .consent-top {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
  }
  #consent-panel .consent-text {
    display: contents;
  }
  #consent-panel .consent-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 20px;
  }
  #consent-panel h2 {
    font-size: 16px;
    margin-bottom: 0;
  }
  #consent-panel p {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.5;
  }
  #consent-panel .btn {
    padding: 12px 16px;
    min-height: 44px;
  }
}
/* Short landscape phones: let the banner scroll rather than cover the whole screen. */
@media (max-height: 480px) {
  #consent-panel {
    /* vh first for browsers without dvh; the safe-area term matches the phone layout's raised bottom offset */
    max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (prefers-reduced-motion: reduce) {
  #consent-panel .btn {
    transition: none;
  }
}