/* ============================================================
   Shared surface treatment: frosted glass panels lifted off the page on a
   layered shadow stack.

   Linked by every page alongside brand-background.css, so the survey card,
   the section nav, the answer panel and the admin card are one material
   rather than four near-identical copies. Add `glass-surface` to a panel
   and it inherits the whole treatment.

   Why glass works here at all: brand-background.js paints a live particle
   field behind the content, so a translucent panel has something real to
   refract. On a flat page this would just look like gray.
   ============================================================ */

.glass-surface {
  /* Kept high enough that Sora at 13px stays crisp over moving particles.
     Legibility beats the effect: this is a form people have to read. */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  /* A light top edge and a darker bottom edge is what reads as "a pane of
     glass catching light" rather than "a div with a border". */
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    /* hairline ring, keeps the panel defined against a light background */
    0 0 0 1px rgba(0, 0, 51, 0.04),
    /* contact shadow: tight and dark, sells that it is resting on something */
    0 1px 2px rgba(0, 0, 51, 0.05),
    0 3px 6px rgba(0, 0, 51, 0.04),
    /* mid lift, tinted Algolia blue rather than neutral gray so the depth
       reads as brand atmosphere and not dirt */
    0 12px 28px -8px rgba(0, 61, 255, 0.10),
    /* the long throw that does the actual floating */
    0 32px 64px -20px rgba(0, 0, 51, 0.18),
    /* specular highlight along the top inner edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    /* faint inner floor, stops the panel looking hollow */
    inset 0 -1px 0 rgba(0, 0, 51, 0.03);
}

/* The primary panel on a page sits highest, so it throws further. */
.glass-surface--raised {
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0 0 1px rgba(0, 0, 51, 0.04),
    0 2px 4px rgba(0, 0, 51, 0.05),
    0 6px 12px rgba(0, 0, 51, 0.04),
    0 20px 40px -10px rgba(0, 61, 255, 0.12),
    0 48px 88px -24px rgba(0, 0, 51, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 51, 0.03);
}

/* Secondary rails sit closer to the page than the primary panel. */
.glass-surface--sunken {
  box-shadow:
    0 0 0 1px rgba(0, 0, 51, 0.04),
    0 1px 2px rgba(0, 0, 51, 0.04),
    0 8px 18px -6px rgba(0, 61, 255, 0.08),
    0 20px 40px -16px rgba(0, 0, 51, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Firefox before 103 and any browser with backdrop-filter disabled would
   render these as washed-out translucent boxes with the particles showing
   straight through the text. Go nearly opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface { background: rgba(255, 255, 255, 0.95); }
  .glass-surface--raised { background: rgba(255, 255, 255, 0.97); }
}