/*
 * GO frosted-glass material.
 * Layer/highlight approach adapted from cameronrye/frostpane (Cameron Rye)
 * and kevinbism/liquid-glass-effect (Kevin Ramirez), both MIT.
 * Full license texts: /licenses.txt (also THIRD_PARTY_NOTICES.md in source).
 * Keep the filter on the surface: filtering content blurs text and controls.
 */
:root {
  --frost-tint: rgb(246 249 242 / 22%);
  --frost-blur: 18px;
  --frost-border: rgb(255 255 255 / 64%);
  --frost-shadow: 0 16px 44px rgb(24 39 27 / 12%),
    0 3px 10px rgb(24 39 27 / 7%),
    inset 0 1px 0 rgb(255 255 255 / 95%),
    inset 1px 0 0 rgb(255 255 255 / 48%),
    inset 0 -1px 0 rgb(255 255 255 / 34%),
    inset 0 0 18px rgb(255 255 255 / 12%);
}

.glass, .floating-panel, dialog, #notice, #busy {
  background: linear-gradient(135deg,
    rgb(255 255 255 / 24%) 0%,
    rgb(255 255 255 / 7%) 42%,
    rgb(226 236 220 / 5%) 68%,
    rgb(255 255 255 / 20%) 100%), var(--frost-tint);
  border: 1px solid var(--frost-border);
  border-bottom-color: rgb(255 255 255 / 32%);
  border-right-color: rgb(255 255 255 / 40%);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(155%) brightness(1.03);
  backdrop-filter: blur(var(--frost-blur)) saturate(155%) brightness(1.03);
  box-shadow: var(--frost-shadow);
}

/* Subtle grain sits above the tint, never intercepts clicks or blurs text. */
.glass::before, .floating-panel::before, dialog::before, #busy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('/assets/frost-grain.svg') repeat;
  opacity: .085;
  pointer-events: none;
  z-index: 0;
}
.glass > *, .floating-panel > *, dialog > *, #busy > * {
  position: relative;
  z-index: 1;
}

/* Keep long-form content readable without returning to an opaque white card. */
.composer-panel, .library-panel, dialog, .login {
  --frost-tint: rgb(249 251 246 / 32%);
  --frost-blur: 22px;
}
.floating-panel.collapsed {
  --frost-tint: rgb(245 250 237 / 24%);
  --frost-blur: 12px;
  box-shadow: var(--frost-shadow), inset 0 0 12px rgb(255 255 255 / 28%);
}
.workspace-controls { --frost-tint: rgb(248 251 242 / 35%); }

/* Inner controls are shallow translucent recesses, not solid nested cards. */
select, input, .tool-grid button, .tool-grid a, .memory-hint {
  background: rgb(255 255 255 / 24%);
  border: 1px solid rgb(255 255 255 / 34%);
  box-shadow: inset 0 1px 2px rgb(35 54 28 / 4%), 0 1px 0 rgb(255 255 255 / 20%);
}
select option { background: #f1f4eb; color: #263329; }
.tool-grid button:hover, .tool-grid a:hover, .memory-hint:hover {
  background: rgb(255 255 255 / 48%);
}
.tool-grid .selected { background: rgb(190 216 157 / 70%); }
.nav.active { background: rgb(205 224 179 / 52%); }
.panel-heading button { background: rgb(255 255 255 / 22%); color: #46533e; }
.profile { border-top-color: rgb(255 255 255 / 38%); }
.divider { background: rgb(255 255 255 / 40%); }
.help, .muted, .field-label, .two-fields label, #context, .status,
.composer-bottom > span, .composer-bottom small, .brand small,
.profile small, .memory-hint small, .panel-heading small {
  color: #4e5d47;
}
.composer-panel textarea::placeholder { color: #65735c; }
.card, .memory-card { background: rgb(255 255 255 / 28%); }

/* Accessible solid fallback; no SVG distortion or duplicated canvas required. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .floating-panel, dialog, #notice, #busy { background: #edf1e8; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .floating-panel, dialog, #notice, #busy {
    background: #edf1e8;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass::before, .floating-panel::before, dialog::before, #busy::before { display: none; }
}
@media (forced-colors: active) {
  .glass, .floating-panel, dialog, #notice, #busy {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass::before, .floating-panel::before, dialog::before, #busy::before { display: none; }
}