/* ===========================================================================
   Materials — Vapor.

   Vapor is the floating translucent layer: the top bar, the tab bar, menus,
   sheets, the command deck, toasts. Everything that hovers above the page and
   nothing that holds long-form content.

   That restriction is the whole discipline. Glass behind body text is how a
   design system loses its contrast floor, because what the text contrasts
   against stops being a token and becomes "whatever scrolled past". iOS does
   the same thing for the same reason: chrome is glass, content is opaque.

   Reference: docs/design/00-design-language.md (Materials)
   =========================================================================== */

@layer components {

  /* -------------------------------------------------------------------------
     The material itself.

     Three things have to be true at once or it reads as a grey scrim rather
     than as glass:

     1. Blur AND saturation. Blur alone desaturates whatever is behind it, so
        the panel goes muddy over a colourful page. The saturate() pass is what
        keeps the colour underneath alive, and it is the difference between
        "frosted" and "dirty".

     2. A specular edge. A blurred translucent panel with a flat border still
        looks flat. Real glass catches light on the edge facing the light
        source, and one 1px inset highlight along the top is enough for the eye
        to call the whole thing a physical pane. This is the single cheapest
        detail in the file and the one that does the most work.

     3. An opaque fallback. Where backdrop-filter is missing, a 72% background
        is just washed-out text on an unpredictable backdrop. The fallback drops
        to the measured --bh-vapor-solid, so the layer is always either real
        glass or a solid surface, never the broken middle.
     ------------------------------------------------------------------------- */
  .bh-vapor {
    background: var(--bh-vapor);
    -webkit-backdrop-filter: blur(var(--blur-vapor)) saturate(1.4);
    backdrop-filter: blur(var(--blur-vapor)) saturate(1.4);
    box-shadow: inset 0 1px 0 0 var(--bh-vapor-edge);
  }

  /* Menus, sheets and the deck sit over arbitrary content and carry the
     text the reader is meant to be looking at, so they blur harder: the point
     is to obliterate the page behind, not to sample it decoratively. */
  .bh-vapor--deep {
    -webkit-backdrop-filter: blur(var(--blur-vapor-deep)) saturate(1.4);
    backdrop-filter: blur(var(--blur-vapor-deep)) saturate(1.4);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bh-vapor { background: var(--bh-vapor-solid); }
  }

  /* The hairline goes on the edge that faces the content, which is a different
     edge depending on where the pane is anchored. The specular highlight does
     not move with it: light comes from above in every one of these cases, so a
     bottom-anchored tab bar still catches it on its top edge. */
  .bh-vapor--under { border-block-end: 1px solid var(--bh-hairline); }
  .bh-vapor--over  { border-block-start: 1px solid var(--bh-hairline); }
  .bh-vapor--panel { border: 1px solid var(--bh-hairline); }

  /* -------------------------------------------------------------------------
     Grain over glass.

     base.css lays film grain over the page at 2.5%. A Vapor pane blurs whatever
     is behind it, grain included, so without this the glass is the one visibly
     smooth region on an otherwise physical surface, and it looks like a hole.

     Re-laying the texture on the pane itself costs no extra request: the same
     background-image is already in cache from body::after.
     ------------------------------------------------------------------------- */
  .bh-vapor::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../brand/grain.svg");
    opacity: 0.025;
    pointer-events: none;
  }

  /* The pseudo-element is positioned against the pane, so the pane has to be a
     containing block. Declared here rather than on every consumer, because a
     consumer that forgets it gets grain stretched across the whole viewport and
     that is a confusing bug to find. */
  .bh-vapor { position: relative; }
}