/* BetterYumz glass look: phone drop-in (specs/glass-look.md, design/glass-mockup/).
   Copy to mobile/static/glass.css and link it AFTER cook.css (glass-look-HANDAPPLY.md, Phone).
   Pure CSS: no JS behaviour, no Kids Mode / allergy / shop / voice logic changes.
   Hooks it styles (added by the hand edits): .lc-glass (the card), .lc-emboss (BetterYumz title
   and big headings only, never step text), .lc-btn-primary / .lc-btn-secondary, .lc-btn-danger
   (Menu Delete), html.lc-night (night: dark glass, 52px buttons and chips), .lc-cook (the cook-step screen: 52px buttons and
   chips in both themes), .lc-allergy-warning (stays solid red), .lc-status
   (mic / listening status line), .lc-progress / .lc-progress-fill (or a native <progress>), plus the
   existing .lc-* card and .lc-shop-* shop bar classes. Colours match chef/glass_theme.py and
   design/glass-mockup/notes.md (tests/test_glass_contrast.py checks both files). */

:root {
  --lc-g-bg: #F6F1E8;
  --lc-g-ink: #1C2B22;
  --lc-g-brand: #1F3D2B;
  --lc-g-muted: #434F48;
  --lc-g-script: #6B4226;
  --lc-g-sub: #3D4A42;
  --lc-g-cta: #B5502F;
  --lc-g-cta-ink: #FFFFFF;
  --lc-g-glass: rgba(255,252,246,.66);
  --lc-g-glass-solid: rgba(255,252,246,.97);
  --lc-g-glass-edge: rgba(255,255,255,.75);
  --lc-g-glass-shadow: 0 24px 60px rgba(70,45,20,.20), 0 2px 6px rgba(70,45,20,.08);
  --lc-g-glass-hi: inset 0 1px 0 rgba(255,255,255,.9);
  --lc-g-pill: rgba(215,229,212,.80);
  --lc-g-pill-ink: #1F3D2B;
  --lc-g-tile: rgba(255,255,255,.72);
  --lc-g-chip: rgba(255,255,255,.78);
  --lc-g-chip-sel: rgba(255,244,237,.88);
  --lc-g-chip-sel-edge: rgba(181,80,47,.55);
  --lc-g-btn2: rgba(255,255,255,.60);
  --lc-g-btn2-edge: rgba(28,43,34,.14);
  --lc-g-track: rgba(28,43,34,.14); /* progress track (muted); the fill is the CTA rust */
  --lc-g-pop: rgba(255,252,246,.74);
  --lc-g-veil: rgba(246,241,232,.45);
  --lc-g-art-filter: none;
  --lc-g-emboss: -1px -1px 0 rgba(255,255,255,.95), 1px 1px 0 rgba(20,40,28,.30), 2px 3px 5px rgba(20,40,28,.18);
  --lc-g-blob1: rgba(207,224,202,.90);
  --lc-g-blob2: rgba(243,198,165,.90);
  --lc-g-blob3: rgba(233,160,124,.50);
  --lc-g-error-bg: #FDECEA;
  --lc-g-error-ink: #8A1C1C;
  --lc-g-error-edge: #B42318;
  --lc-g-plate-ink: #1F3D2B;
  --lc-g-btn-h: 46px;
  --lc-g-chip-h: 44px; /* mockup 40px; phone keeps the 44px tap target (specs/shop-per-item.md, Edit 7) */
  --lc-g-blur: blur(22px) saturate(160%);
}
html.lc-night { /* night = Cook Mode */
  --lc-g-bg: #141A16;
  --lc-g-ink: #F3EEE4;
  --lc-g-brand: #F3EEE4;
  --lc-g-muted: #B7C0B8;
  --lc-g-script: #F09A78;
  --lc-g-sub: #D9D3C7;
  --lc-g-glass: rgba(24,31,27,.68);
  --lc-g-glass-solid: rgba(30,38,33,.97);
  --lc-g-glass-edge: rgba(243,238,228,.14);
  --lc-g-glass-shadow: 0 28px 70px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --lc-g-glass-hi: inset 0 1px 0 rgba(255,255,255,.07);
  --lc-g-pill: rgba(42,58,48,.85);
  --lc-g-pill-ink: #E4ECE2;
  --lc-g-tile: rgba(255,255,255,.06);
  --lc-g-chip: rgba(255,255,255,.07);
  --lc-g-chip-sel: rgba(224,122,85,.16);
  --lc-g-chip-sel-edge: rgba(240,154,120,.70);
  --lc-g-btn2: rgba(255,255,255,.06);
  --lc-g-btn2-edge: rgba(243,238,228,.18);
  --lc-g-track: rgba(243,238,228,.18);
  --lc-g-pop: rgba(26,33,29,.78);
  --lc-g-veil: rgba(20,26,22,.35);
  --lc-g-art-filter: brightness(.62) saturate(.9);
  --lc-g-emboss: -1px -1px 0 rgba(255,255,255,.20), 1px 2px 0 rgba(0,0,0,.80), 2px 4px 9px rgba(0,0,0,.55);
  --lc-g-blob1: rgba(42,58,48,.90);
  --lc-g-blob2: rgba(90,46,31,.90);
  --lc-g-blob3: rgba(59,42,30,.50);
  --lc-g-error-bg: #3A1714;
  --lc-g-error-ink: #FFD7D0;
  --lc-g-error-edge: #F97066;
  --lc-g-btn-h: 52px; /* Cook Mode: 52px tap targets */
  --lc-g-chip-h: 52px;
}

/* ---------- page + backdrop: blobs, then the chef art on top (it scrolls away with the page) ---------- */
body {
  background:
    radial-gradient(520px circle at -120px 640px, var(--lc-g-blob1), transparent 62%),
    radial-gradient(460px circle at calc(100% + 80px) 170px, var(--lc-g-blob2), transparent 62%),
    radial-gradient(300px circle at 78% calc(100% - 190px), var(--lc-g-blob3), transparent 65%),
    var(--lc-g-bg) !important;
  color: var(--lc-g-ink);
}
body::before { /* placed on the page itself (not body), under all content, scrolls with the page */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: 0; width: 100%; height: 380px; border-radius: 0 0 32px 32px;
  /* same file as the phone splash; if your splash uses another path, use that path here */
  background: linear-gradient(to bottom, transparent 0 190px, var(--lc-g-veil) 220px),
              url("/assets/splash-art.jpg") center top / cover no-repeat;
  filter: var(--lc-g-art-filter);
}

/* Header status (#status / .lc-status) sits on splash-art, outside .lc-glass.
   cook.css muted (~#5a6b62) washes out on the white chef hat; ink + cream halo keeps
   "Dish · Serves N" readable without a pill. Tokens flip under html.lc-night. */
header.top .lc-status {
  color: var(--lc-g-ink) !important;
  font-weight: 600;
  text-shadow:
    0 0 8px rgba(246, 241, 232, 0.95),
    0 0 2px rgba(255, 252, 246, 1),
    0 1px 0 rgba(255, 252, 246, 0.95);
}
html.lc-night header.top .lc-status {
  text-shadow:
    0 0 8px rgba(20, 26, 22, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.65);
}

/* ---------- Cook Mode (the cook-step screen, hook .lc-cook): 52px buttons and chips in BOTH themes ---------- */
.lc-cook { --lc-g-btn-h: 52px; --lc-g-chip-h: 52px; }

/* ---------- the glass card ---------- */
.lc-glass {
  position: relative; z-index: 1;
  margin: 220px 10px 16px; padding: 18px 16px 16px;
  color: var(--lc-g-ink);
  background-color: var(--lc-g-glass);
  -webkit-backdrop-filter: var(--lc-g-blur);
  backdrop-filter: var(--lc-g-blur);
  border: 1px solid var(--lc-g-glass-edge);
  box-shadow: var(--lc-g-glass-shadow), var(--lc-g-glass-hi);
  border-radius: 28px;
}
@media (min-width: 601px) {
  .lc-glass { max-width: 460px; margin: 220px auto 24px; padding: 22px 22px 20px; }
}
/* the shop "pop-up": the inline Instacart / Amazon row as a glass panel */
.lc-glass .lc-shop-stores {
  background-color: var(--lc-g-pop);
  -webkit-backdrop-filter: var(--lc-g-blur);
  backdrop-filter: var(--lc-g-blur);
  border: 1px solid var(--lc-g-glass-edge);
  box-shadow: var(--lc-g-glass-shadow), var(--lc-g-glass-hi);
  border-radius: 26px; padding: 14px; gap: 10px; margin-top: 12px;
}

/* ---------- fallback: no backdrop-filter -> solid 0.97 panels ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lc-glass, .lc-glass .lc-shop-stores { background-color: var(--lc-g-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .lc-glass, .lc-glass .lc-shop-stores {
    background-color: var(--lc-g-glass-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
html.lc-no-blur .lc-glass, html.lc-no-blur .lc-glass .lc-shop-stores {
  background-color: var(--lc-g-glass-solid);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- embossed type: the BetterYumz title and big headings ONLY ---------- */
.lc-emboss { text-shadow: var(--lc-g-emboss); }
.lc-glass p, .lc-glass li, .lc-step-text, .lc-step-meta, .lc-muted, .lc-tag, .lc-qty,
.lc-badges span, .lc-hero h1 span, .lc-btn-primary, .lc-btn-secondary, .lc-shop-chip,
.lc-shop-store, .lc-shop-count, .lc-shop-hint { text-shadow: none; }

/* ---------- text ---------- */
.lc-glass h1, .lc-glass h2, .lc-glass h3, .lc-glass p, .lc-glass li { color: var(--lc-g-ink); }
.lc-glass .lc-muted, .lc-step-meta, .lc-shop-hint { color: var(--lc-g-muted) !important; }
.lc-step-h { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; color: var(--lc-g-ink); }
html.lc-night .lc-step-h { font-size: 2rem; }
.lc-step-text { font-size: 1.1rem; line-height: 1.5; margin: 0 0 16px; color: var(--lc-g-ink); }
html.lc-night .lc-step-text { font-size: 1.3rem; }
.lc-step-meta { font-size: .92rem; margin: -8px 0 16px; }

/* ---------- recipe card (.lc-* classes shared with chef/recipe_card.py) ---------- */
.lc-glass .lc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lc-glass .lc-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  border: 2px solid var(--lc-g-glass-edge); box-shadow: 0 4px 12px rgba(0,0,0,.18); flex: none;
}
.lc-glass .lc-logo {
  font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1.05;
  color: var(--lc-g-brand) !important;
}
.lc-glass .lc-tag { font-style: italic; color: var(--lc-g-script) !important; font-size: 1rem; margin-top: 3px; }
.lc-glass .lc-hero img, .lc-glass .lc-hero-ph { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; object-fit: cover; }
.lc-glass .lc-hero-ph {
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  background:
    radial-gradient(ellipse 34% 52% at 50% 52%, #FBF7EF 0 92%, #E3D8C6 95%, transparent 100%),
    radial-gradient(circle at 20% 20%, #E9B48F, transparent 55%),
    linear-gradient(135deg, #B9D1B3, #7FA27A 60%, #5F8360);
  color: var(--lc-g-plate-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -30px 60px rgba(0,0,0,.12);
}
html.lc-night .lc-glass .lc-hero img, html.lc-night .lc-glass .lc-hero-ph { filter: brightness(.8); }
.lc-glass .lc-hero h1 {
  font-size: 1.8rem; line-height: 1.12; margin: 16px 0 10px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--lc-g-ink) !important;
}
.lc-glass .lc-hero h1 span { display: block; font-weight: 500; font-size: 1.2rem; color: var(--lc-g-sub) !important; }
.lc-glass .lc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lc-glass .lc-badges span {
  background-color: var(--lc-g-pill) !important; color: var(--lc-g-pill-ink) !important;
  border: 1px solid var(--lc-g-glass-edge); border-radius: 999px; padding: 6px 12px;
  font-size: .88rem; font-weight: 600;
}
.lc-glass .lc-ings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 18px; }
.lc-glass .lc-tile {
  background-color: var(--lc-g-tile) !important; border: 1px solid var(--lc-g-glass-edge);
  border-radius: 16px; padding: 8px 2px 6px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.lc-glass .lc-qty { font-size: .78rem; color: var(--lc-g-muted) !important; font-weight: 600; }

/* ---------- buttons ---------- */
.lc-btn-primary, .lc-btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--lc-g-btn-h); border-radius: 16px;
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.lc-btn-primary {
  min-height: 52px; /* the primary CTA keeps the app's 52px in both modes */
  background: var(--lc-g-cta) !important; color: var(--lc-g-cta-ink) !important; border: 0 !important;
  box-shadow: 0 8px 20px rgba(181,80,47,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.lc-btn-secondary {
  background-color: var(--lc-g-btn2) !important; color: var(--lc-g-ink) !important;
  border: 1px solid var(--lc-g-btn2-edge) !important;
}

/* ---------- Menu / settings screen buttons (Save recipe, Start over, saved recipes, Delete) ----------
   The Oct 9 live bug: the page text is the glass ink (#F3EEE4 at night) and cook.css's buttons
   inherit it, but buttons with no glass hook kept cook.css's light beige (#E6E0D7): ~1.2:1.
   Text and background are now always set TOGETHER. Hooked buttons (.lc-btn-secondary,
   .lc-btn-danger) win with !important. The safety net for unhooked buttons uses element-only
   selectors (specificity 0,0,3): that beats cook.css's bare `button` rules but loses to its class
   rules, so a cook.css-coloured primary such as "Save settings" keeps its colour. */
html body button, html body :where(input[type="button"], input[type="submit"]) {
  background-color: var(--lc-g-btn2); color: var(--lc-g-ink);
}
.lc-btn-danger { /* Delete: a distinct danger style (red ink on the error panel), never glass */
  display: flex; align-items: center; justify-content: center;
  min-height: var(--lc-g-btn-h); border-radius: 16px; font-weight: 700;
  background: var(--lc-g-error-bg) !important; color: var(--lc-g-error-ink) !important;
  border: 1.5px solid var(--lc-g-error-edge) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important;
}
/* Disabled (e.g. no recipe yet): still readable (the softer --lc-g-sub ink, 4.5:1+, never faded) and
   marked by more than colour: dashed border, not-allowed cursor, no shadow. Beats cook.css's fade. */
html body button:disabled, html body button[aria-disabled="true"],
.lc-btn-secondary:disabled, .lc-btn-secondary[aria-disabled="true"],
.lc-btn-danger:disabled, .lc-btn-danger[aria-disabled="true"] {
  background: var(--lc-g-btn2) !important; color: var(--lc-g-sub) !important;
  border: 1.5px dashed var(--lc-g-muted) !important; box-shadow: none !important;
  opacity: 1 !important; filter: none !important; cursor: not-allowed;
}

/* ---------- shop bar: count, hint, chips (eggplant · 1, muted qty) ---------- */
.lc-glass .lc-shop { background: transparent !important; padding: 4px 0 0; margin-top: 18px; text-align: center; }
.lc-glass .lc-shop-count { color: var(--lc-g-ink) !important; font-weight: 700; font-size: 1rem; }
.lc-glass .lc-shop-chips { justify-content: center; gap: 8px; }
.lc-glass .lc-shop-chip {
  min-height: var(--lc-g-chip-h); padding: 0 13px; border-radius: 999px;
  background-color: var(--lc-g-chip) !important; border: 1px solid var(--lc-g-btn2-edge) !important;
  color: var(--lc-g-ink) !important; font-weight: 600;
}
.lc-glass .lc-shop-chip[aria-pressed="true"] { /* keeps cook.css's check mark: selected is never colour-only */
  background-color: var(--lc-g-chip-sel) !important; border: 1.5px solid var(--lc-g-chip-sel-edge) !important;
}
.lc-glass .lc-shop-chip-qty { color: var(--lc-g-muted) !important; font-weight: 500; }
.lc-glass .lc-shop-store {
  min-height: var(--lc-g-btn-h); border-radius: 16px; font-weight: 700;
  background: var(--lc-g-cta) !important; color: var(--lc-g-cta-ink) !important; border: 0 !important;
  box-shadow: 0 8px 20px rgba(181,80,47,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.lc-glass .lc-shop-store + .lc-shop-store { /* Amazon: secondary, like the mockup */
  background: var(--lc-g-btn2) !important; color: var(--lc-g-ink) !important;
  border: 1px solid var(--lc-g-btn2-edge) !important; box-shadow: none;
}

/* ---------- the allergy warning stays a SOLID, loud red panel (never glass) ---------- */
.lc-allergy-warning {
  background: var(--lc-g-error-bg) !important; color: var(--lc-g-error-ink) !important;
  border: 2px solid var(--lc-g-error-edge) !important; border-radius: 14px;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  opacity: 1 !important; font-weight: 600; text-shadow: none;
}
.lc-allergy-warning * { color: var(--lc-g-error-ink) !important; }

/* ---------- mic / listening status ("Mic blocked. Allow microphone ...") and other status lines:
   body ink on the glass, never a fixed dark colour from cook.css (that was ~1.5:1 on night glass) ---------- */
.lc-glass .lc-status, .lc-glass .lc-status * { color: var(--lc-g-ink) !important; opacity: 1 !important; text-shadow: none; }

/* ---------- step progress bar: CTA rust on a muted track, both modes ---------- */
.lc-glass .lc-progress { background: var(--lc-g-track) !important; border-radius: 999px; overflow: hidden; }
.lc-glass .lc-progress-fill { background: var(--lc-g-cta) !important; border-radius: 999px; }
.lc-glass progress {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px;
  background: var(--lc-g-track); color: var(--lc-g-cta); accent-color: var(--lc-g-cta);
}
.lc-glass progress::-webkit-progress-bar { background: var(--lc-g-track); border-radius: 999px; }
.lc-glass progress::-webkit-progress-value { background: var(--lc-g-cta); border-radius: 999px; }
.lc-glass progress::-moz-progress-bar { background: var(--lc-g-cta); border-radius: 999px; }

/* ---------- Use it up: "Premium" badge (use-it-up-planner P5) ----------
   Hook: <span class="lc-premium">Premium</span> next to the "Use it up" heading (P3). A pill only:
   no price, no padlock, no upsell. Glass tokens only: the rust-tinted selected-chip fill and edge,
   with the script brown by day and the light ink at night (rust text alone was 3.1:1 over the worst
   backdrop by day and 1.9:1 at night; tests/test_glass_contrast.py checks glass and the fallback). */
.lc-premium {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.25; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--lc-g-chip-sel-edge); background: var(--lc-g-chip-sel); color: var(--lc-g-script);
  text-shadow: none;
}
html.lc-night .lc-premium { color: var(--lc-g-ink); }

/* ---------- night Menu fields (night-fields, design/night-fields-mockup/night-fields.css) ----------
   Allergies / Pantry text boxes and the native file input ("Choose File" / "No file chosen") become
   dark glass with light ink. NIGHT ONLY: every rule is under html.lc-night, so light mode renders
   exactly as before. Matches textarea / text inputs / file inputs inside the card (.lc-glass) and the
   hooks .lc-field / .lc-file (night-fields-HANDAPPLY B2). Colours use !important so cook.css field
   rules can't win (the Menu-button lesson). */
html.lc-night {
  --lc-g-field: rgba(8, 11, 9, .55);           /* dark glass field, over the night card glass */
  --lc-g-field-solid: #121713;                  /* fallback (no backdrop-filter) */
  --lc-g-field-edge: rgba(243, 238, 228, .30);  /* soft border */
  --lc-g-field-hover-edge: rgba(243, 238, 228, .45);
  --lc-g-placeholder: #A7B1A9;
  --lc-g-focus: #F09A78;                        /* = --lc-g-script (light rust); ring */
}
html.lc-night :is(.lc-glass textarea, .lc-glass input:is([type="text"], [type="search"], [type="number"], [type="email"]), .lc-field) {
  background-color: var(--lc-g-field) !important;
  color: var(--lc-g-ink) !important;
  caret-color: var(--lc-g-focus);
  border: 1px solid var(--lc-g-field-edge) !important;
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 10px 12px;
  color-scheme: dark;                           /* dark scrollbars / autofill / resize grip */
  text-shadow: none;
}
html.lc-night :is(.lc-glass textarea, .lc-glass input, .lc-field)::placeholder { color: var(--lc-g-placeholder) !important; opacity: 1; }
html.lc-night :is(.lc-glass textarea, .lc-glass input, .lc-field):hover { border-color: var(--lc-g-field-hover-edge) !important; }
html.lc-night :is(.lc-glass textarea, .lc-glass input, .lc-field):focus-visible {
  outline: 2px solid var(--lc-g-focus); outline-offset: 2px; border-color: var(--lc-g-focus) !important;
}
html.lc-night :is(.lc-glass input[type="file"], .lc-file):focus-visible::file-selector-button {
  outline: 2px solid var(--lc-g-focus); outline-offset: 2px; border-color: var(--lc-g-focus) !important;
}
html.lc-night :is(.lc-glass textarea, .lc-field):focus:not(:focus-visible) { outline: 2px solid var(--lc-g-focus); outline-offset: 2px; }

/* native file input: "No file chosen" in body ink, and a styled "Choose File" button */
html.lc-night :is(.lc-glass input[type="file"], .lc-file) {
  color: var(--lc-g-ink) !important;
  color-scheme: dark;
  font: inherit; font-size: .95rem; font-weight: 400;
  max-width: 100%;
  display: block; margin: 0 0 14px;              /* room before the saved-recipe list */
}
html.lc-night :is(.lc-glass input[type="file"], .lc-file)::file-selector-button {
  min-height: var(--lc-g-btn-h);                 /* 52px at night (Cook Mode tap target) */
  margin: 6px 12px 0 0; padding: 0 18px;
  border-radius: 16px;
  background-color: var(--lc-g-btn2) !important;
  border: 1px solid var(--lc-g-field-edge) !important;
  color: var(--lc-g-ink) !important;
  font: inherit; font-weight: 700;
  cursor: pointer;
}
html.lc-night :is(.lc-glass input[type="file"], .lc-file):hover::file-selector-button { border-color: var(--lc-g-field-hover-edge) !important; background-color: rgba(255,255,255,.10) !important; }
html.lc-night :is(.lc-glass input[type="file"], .lc-file):focus-visible { outline: none; }

/* fallback: solid fields (same as the card's solid fallback) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.lc-night :is(.lc-glass textarea, .lc-glass input:is([type="text"], [type="search"], [type="number"], [type="email"]), .lc-field) { background-color: var(--lc-g-field-solid) !important; }
}
html.lc-night.lc-no-blur :is(.lc-glass textarea, .lc-glass input:is([type="text"], [type="search"], [type="number"], [type="email"]), .lc-field) {
  background-color: var(--lc-g-field-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}