/* ======================================================================
   MindMesh Profile Widget Skin Template: GLASS
   ----------------------------------------------------------------------
   Purpose:
   - Provides a "glass" chrome for profile widgets (.mm-pw)
   - Keeps GridStack shell invisible (handled elsewhere in profile.css)
   - Ensures clean rounded corners with backdrop-filter (no shading seams)
   - Supports per-widget backgrounds (image/color/opacity) via gear system
   - Ensures per-widget gear overlay remains clickable (z-index contract)

   Core principles / non-negotiables:
   1) ONLY ONE border-radius owner: .mm-pw (the chrome root).
      Do NOT apply competing radii to inner layers.
   2) Glass blur + border MUST live on .mm-pw::before, not on the body.
   3) Avoid "border: 1px solid ..." on blurred rounded surfaces.
      Use inset box-shadow for borders to prevent AA corner seams.
   4) z-index contract MUST be:
      - glass sheet (::before)          z-index: 0
      - bar + body (content wrappers)   z-index: 2
      - gear overlay layer              z-index: 10
   5) The per-widget background paint layer is NOT here.
      It's in profile.css on .mm-pw__body::before (so gear system works).

   When creating new skins:
   - Duplicate this file, change variables under "Theme Variables"
   - Keep the layer/stacking + border technique identical unless you
     really know what you're changing.
   ====================================================================== */


/* ======================================================================
   Theme Variables (per-skin knobs)
   ----------------------------------------------------------------------
   These values define the look. New skins should primarily change these.
   ====================================================================== */

.mm-pw--skin-glass {
  /* Main glass sheet behind everything */
  --pw-bg: linear-gradient(135deg, rgba(240,249,255,.82), rgba(224,235,255,.70));

  /* Border colour (applied via inset shadow) */
  --pw-border: rgba(255, 255, 255, 0.70);

  /* Single radius owner (do not fight this elsewhere) */
  --pw-radius: 22px;

  /* Titlebar surface */
  --pw-bar-bg: linear-gradient(110deg, rgba(255,255,255,.48), rgba(190,222,255,.24));
  --pw-bar-border: rgba(79,111,158,.16);
  --pw-bar-text: #193653;

  /* Titlebar button styling */
  --pw-btn-text: #294d70;
  --pw-btn-hover-bg: rgba(255, 255, 255, 0.12);

  /* IMPORTANT:
     Many widget UIs render with white-ish backgrounds internally.
     If we force body text to white, those widgets become unreadable.
     So body text defaults to dark unless overridden by per-widget FG. */
  --pw-body-text: #0f172a;

  /* Outer drop shadow */
  --pw-shadow: 0 16px 40px rgba(9,30,66,.22), 0 1px 0 rgba(255,255,255,.70) inset;

  /* Blur strength for the glass sheet (and derived for titlebar blur) */
  --pw-blur: 20px;
}


/* ======================================================================
   Structural Root (chrome owner)
   ----------------------------------------------------------------------
   This is the ONLY element that owns radius and clipping.
   ====================================================================== */

.mm-pw--skin-glass.mm-pw {
  position: relative;            /* anchors ::before + overlay layers */
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow);

  /* Clips all internal layers to the radius (required) */
  overflow: hidden;

  /* Compositing hints:
     Helps browsers render backdrop-filter corners more cleanly. */
  transform: translateZ(0);
  will-change: transform;

  /* Mask stabiliser:
     Reduces corner artifacts on blurred rounded layers in some browsers.
     Keep unless you have strong evidence it's safe to remove. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}


/* ======================================================================
   Glass Sheet Layer (background + border + blur)
   ----------------------------------------------------------------------
   Everything that is "the glass" lives on ::before.
   - Do NOT paint the glass background on the body.
   - Do NOT apply border: 1px solid to blurred rounded sheets.
   ====================================================================== */

.mm-pw--skin-glass.mm-pw::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;

  /* Glass tint */
  background: var(--pw-bg);

  /* IMPORTANT:
     Avoid border: 1px solid ... on a blurred rounded element.
     Use inset shadow instead to prevent corner AA seams. */
  box-shadow: 0 0 0 1px var(--pw-border) inset;

  /* Blur applies to what's behind this widget */
  backdrop-filter: blur(var(--pw-blur));
  -webkit-backdrop-filter: blur(var(--pw-blur));

  /* This layer is purely visual */
  pointer-events: none;

  /* z-index contract: glass sheet MUST be at 0 */
  z-index: 0;

  /* Extra compositor nudge (optional but currently helpful) */
  transform: translateZ(0);
}


/* ======================================================================
   Gear Overlay Layer (per-widget style control overlay)
   ----------------------------------------------------------------------
   This is the overlay container that holds the gear button/popout.
   The layer itself is click-through, BUT it MUST sit above content
   so the button can be clicked.

   NOTE:
   - profile.css gives .mm-widget-style-btn pointer-events: auto
   - This container should remain pointer-events: none
   ====================================================================== */

.mm-pw--skin-glass .mm-widget-style-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* container doesn't block interactions */
  pointer-events: none;

  /* CRITICAL:
     Must be ABOVE bar/body (otherwise clicks go to widget content).
     This fixes the "gear doesn't work" bug we hit. */
  z-index: 10;
}


/* ======================================================================
   Content Wrappers (titlebar + body)
   ----------------------------------------------------------------------
   These wrappers should sit above the glass sheet, below the gear overlay.
   ====================================================================== */

.mm-pw--skin-glass .mm-pw__bar,
.mm-pw--skin-glass .mm-pw__body {
  position: relative;

  /* z-index contract: content wrappers at 2 */
  z-index: 2;
}


/* ======================================================================
   Titlebar (optional)
   ----------------------------------------------------------------------
   Uses matching seam-safe "border" technique.
   ====================================================================== */

.mm-pw--skin-glass .mm-pw__bar {
  background: var(--pw-bar-bg);

  /* Matching technique: avoid border-bottom seams too */
  box-shadow: 0 -1px 0 0 var(--pw-bar-border) inset;

  color: var(--pw-bar-text);

  /* Titlebar blur: slightly less than main glass */
  backdrop-filter: blur(calc(var(--pw-blur) * 0.75));
  -webkit-backdrop-filter: blur(calc(var(--pw-blur) * 0.75));
}


/* ======================================================================
   Titlebar Buttons
   ====================================================================== */

.mm-pw--skin-glass .mm-pw__btn {
  color: var(--pw-btn-text);
}

.mm-pw--skin-glass .mm-pw__btn:hover {
  background: var(--pw-btn-hover-bg);
}


/* ======================================================================
   Body
   ----------------------------------------------------------------------
   IMPORTANT:
   Body must remain transparent so per-widget background painting
   (profile.css: .mm-pw__body::before) can show through.
   ====================================================================== */

.mm-pw--skin-glass .mm-pw__body {
  background: transparent;

  /* Per-widget fg takes priority. Otherwise use skin default. */
  color: var(--mm-widget-fg, var(--pw-body-text));
}


/* ======================================================================
   No Titlebar Mode
   ----------------------------------------------------------------------
   We always render the bar markup but hide it when requested.
   ====================================================================== */

.mm-pw--no-titlebar .mm-pw__bar {
  display: none !important;
}

.mm-pw--skin-glass .mm-pw__bar { border-bottom: 0; }
@supports not (backdrop-filter: blur(1px)) { .mm-pw--skin-glass { --pw-bg: #eaf2fc; } }