/* ===========================================================================
   glass.css — the frosted-glass panels.

   Both apps use Apple's "Liquid Glass" look, so the website uses the same
   language: a translucent panel that blurs whatever is behind it, with a thin
   bright edge and a soft highlight along the top.

   This lives in its own file so you can play with the numbers without any risk
   of breaking the rest of the site. The three you will most likely want to
   change are marked below.
   =========================================================================== */

.glass {
  position: relative;

  /* 1. THE BLUR — how frosted the glass is. Bigger = blurrier. */
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);

  /* 2. THE TINT — how milky the glass is. 0.08 is 8% white. Try 0.04 or 0.14. */
  background: rgba(255, 255, 255, 0.08);

  /* 3. THE EDGE — the thin bright hairline around the panel. */
  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: var(--radius-lg);

  /* A drop shadow underneath, plus a faint glow just inside the top edge —
     that inner glow is what makes it read as glass and not as grey plastic. */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* A gentle sheen across the top third of the panel. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 45%);
  pointer-events: none;   /* so it never blocks clicks */
}

/* Everything you put inside a glass panel should sit above that sheen. */
.glass > * { position: relative; z-index: 1; }

/* Smaller, lighter variants. */
.glass-sm { border-radius: var(--radius); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.glass-quiet { background: rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14); }

/* Convenient padding, since almost every glass panel wants some. */
.glass-pad { padding: clamp(1.4rem, 3vw, 2.4rem); }

/* Older browsers (and Firefox with the feature turned off) cannot blur what is
   behind an element. They get a solid dark panel instead, which still looks
   deliberate — it just is not see-through.                                    */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-sm { background: rgba(22, 24, 30, 0.92); }
}