/* ============================================================================
   lg.css — "M3 Liquid G" / Liquid Glass materials (v01r22), alternatives to
   Material 3 Expressive. Ported from the m3_expressive_v10 reference.

   Two glass appearances, both keyed off m3e.js's data attributes:
     html[data-glass="1"]  → Liquid G   (translucent + backdrop blur)
     html[data-plus="1"]   → Liquid G+  (adds the #glass-blur SVG displacement
                              filter + inner-glow highlight, on top of glass)
   The glass re-tints cu's EXISTING component classes (.card, .panel, .m3-btn,
   .seg, .navbar, …) as translucent glass that blurs over a full-screen #fieldBg
   backdrop. The glass is derived from the live M3 surface tokens via color-mix,
   so the theme-colour + scheme pickers drive both materials; #fieldBg is painted
   by m3e.js from the Liquid Glass {bg, bgColor, linAngle, radDir, radX, radY}
   controls, and --blur-amt comes from the Blur slider.

   Rules are intentionally UNLAYERED so they win over m3e.css's @layer rules.
   ============================================================================ */

html[data-glass="1"] {
  --blur-amt: 18px;
  --glass-blur: saturate(165%) blur(var(--blur-amt));
}

/* Full-screen colour backdrop (painted by m3e.js paintField). It sits at
   z-index:-1 so it paints above the page background but below all content,
   giving the translucent glass something to blur over. Hidden in M3E mode. */
.field-bg {
  display: none; position: fixed; inset: 0; z-index: -1;
  background: var(--md-sys-color-background);
  transition: background var(--m-effects);
}
html[data-glass="1"] .field-bg { display: block; }

/* The Liquid Glass controls only make sense in a glass mode. Blur/background/
   background-colour appear for both glass variants; the linear-angle and radial
   direction/position controls appear only for their matching background type. */
html:not([data-glass="1"]) #blurField,
html:not([data-glass="1"]) #bgField,
html:not([data-glass="1"]) #bgColorField,
html:not([data-glass="1"]) #linField,
html:not([data-glass="1"]) #radField { display: none; }
#linField, #radField { display: none; }
html[data-glass="1"][data-bg=linear] #linField { display: block; }
html[data-glass="1"][data-bg=radial] #radField { display: block; }
/* the show rules above carry an ID, so they out-specify the generic
   collapse rule (.card.collapsible.collapsed > :not(.sec-head)); re-hide
   these fields with matching ID specificity when their card is collapsed */
.card.collapsible.collapsed > #linField,
.card.collapsible.collapsed > #radField { display: none; }

/* ---- shared glass surfaces ---- */
html[data-glass="1"] .appbar,
html[data-glass="1"] .panel,
html[data-glass="1"] .card,
html[data-glass="1"] .navbar,
html[data-glass="1"] .navrail,
html[data-glass="1"] .sticker-card,
html[data-glass="1"] .toast {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 56%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255/.16), 0 16px 44px -18px rgb(0 0 0/.45);
}
html[data-glass="1"] .toast { color: var(--md-sys-color-on-surface); }

/* inner / highest-tint surfaces */
html[data-glass="1"] .seg,
html[data-glass="1"] .chip,
html[data-glass="1"] .region-open,
html[data-glass="1"] .m3-input {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 50%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ---- buttons ---- */
html[data-glass="1"] .m3-btn.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
html[data-glass="1"] .m3-btn.tonal {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, transparent);
  color: var(--md-sys-color-on-secondary-container);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html[data-glass="1"] .m3-btn.outlined {
  background: color-mix(in srgb, var(--md-sys-color-surface) 24%, transparent);
  color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html[data-glass="1"] .m3-btn.text { background: transparent; color: var(--md-sys-color-primary); }

/* ---- selection states ---- */
html[data-glass="1"] .seg button[aria-pressed=true] { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
html[data-glass="1"] .chip[aria-pressed=true] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
html[data-glass="1"] .m3-input:focus { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent); }

/* nav indicator pill keeps the M3E look (secondary-container) over the glass */
html[data-glass="1"] .navbar button[aria-pressed=true] .ind,
html[data-glass="1"] .navrail button[aria-pressed=true] .ind { background: var(--md-sys-color-secondary-container); }

/* The polygon editor must stay an opaque sheet over the page (its preview map
   is hidden while editing); only its bars get the glass treatment. */
html[data-glass="1"] .region-editor { background: var(--md-sys-color-background); }
html[data-glass="1"] .editor-bar,
html[data-glass="1"] .editor-form {
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 56%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ============================================================================
   Liquid G+  (html[data-plus="1"]) — layers the #glass-blur SVG displacement
   filter (feTurbulence + feDisplacementMap, defined in the shell) on top of the
   backdrop blur, plus a soft inner-glow highlight so surfaces read as refractive
   glass rather than flat frost. Falls back gracefully: browsers that ignore the
   url() filter still get the plain Liquid G blur.
   ============================================================================ */
html[data-plus="1"] .appbar,
html[data-plus="1"] .panel,
html[data-plus="1"] .card,
html[data-plus="1"] .navbar,
html[data-plus="1"] .navrail,
html[data-plus="1"] .sticker-card,
html[data-plus="1"] .editor-bar,
html[data-plus="1"] .editor-form {
  -webkit-backdrop-filter: var(--glass-blur) url(#glass-blur);
  backdrop-filter: var(--glass-blur) url(#glass-blur);
  box-shadow: inset 2px 2px 3px rgb(255 255 255/.42), inset -2px -2px 3px rgb(255 255 255/.42),
    0 18px 46px -18px rgb(0 0 0/.5);
}
html[data-plus="1"] .seg,
html[data-plus="1"] .chip,
html[data-plus="1"] .region-open,
html[data-plus="1"] .m3-input {
  box-shadow: inset 1px 1px 2px rgb(255 255 255/.30), inset -1px -1px 2px rgb(255 255 255/.30);
}

/* ============================================================================
   v14 nav config — glass topbar + navpill.
   In any glass mode the topbar floats as a rounded pill; in Liquid G+ the mobile
   bottom navbar becomes a centered floating pill (the "navpill"). Both reuse the
   translucent glass surface defined above.
   ============================================================================ */
html[data-glass="1"] .appbar {
  position: sticky; top: max(env(safe-area-inset-top), 10px);
  margin: 10px auto 4px; width: calc(100% - 40px); max-width: 1040px;
  gap: 10px; border-radius: var(--r-full); padding: 8px 18px;
}
html[data-style=lgplus] .navbar {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: max(env(safe-area-inset-bottom), 16px);
  width: auto; justify-content: center; gap: 4px;
  border-radius: var(--r-full); padding: 8px 10px;
}