/* Shared funnel chrome: the header mirrors the existing footer material.
   Directional hairlines and shadows continue to face the content. */
html body :is(.app-header, .identity-footer) {
  background: var(--canvas);
  --bar-sheen: color-mix(in srgb, var(--chrome-ink, var(--ink)) 3.6%, transparent);
  --bar-edge: color-mix(in srgb, var(--chrome-accent, var(--secondary)) 32%, transparent);
  --bar-shadow: #0000002b;
  --bar-contact-shadow: #00000013;
  --bar-shadow-depth: 22px;
}
html body .app-header::before {
  bottom: -1px;
  background:
    linear-gradient(90deg, transparent, var(--bar-edge) 38%, var(--bar-edge) 62%, transparent) bottom/100% 1px no-repeat,
    radial-gradient(ellipse 75% 90% at 50% 100%, var(--bar-sheen), transparent 100%);
}
html body .app-header::after {
  top: calc(100% + 1px);
  background:
    linear-gradient(var(--bar-contact-shadow), transparent 8px),
    radial-gradient(ellipse 68% 100% at 50% 0, var(--bar-shadow), transparent 85%);
}
html body[data-theme="light"] :is(.app-header, .identity-footer) {
  background: var(--sb-pearl-card, var(--canvas));
  --bar-sheen: var(--sb-pearl-wash);
  --bar-edge: var(--sb-pearl-edge);
  --bar-shadow: #57504412;
  --bar-contact-shadow: #57504408;
}
@media (max-width: 600px) {
  html body :is(.app-header, .identity-footer) { --bar-shadow-depth: 16px; }
}
@media (forced-colors: active) {
  html body :is(.app-header, .identity-footer) { background: Canvas; box-shadow: none; }
  html body .app-header::before, html body .app-header::after,
  html body .identity-footer::before, html body .identity-footer::after { display: none; }
}