/* Lagos Life materials: control glass, panel glass, dark glass, solid, scrim.
   Owner: 5b. Spec: site/surfaces-motion.html#materials and #glass, 05-sections/5b-layout.md section 7.

   Glass is for the control layer only (the HUD over the 3D world), never inside content.
   Fallback order, all automatic:
     fine pointer (desktop)        fill + 16px blur + saturate(1.4)
     coarse pointer (phones)       97% fill, no blur (the app's existing performance rule)
     html[data-saver]              97% fill, no blur (the app's existing data-saver rule)
     reduced transparency          the solid twin: --paper, or --surface-dark-solid for dark glass
     forced colours                system border so the edge stays visible
   Docs specimens may force a fallback with data-demo-material="phone|solid". */

.ll-glass {
  background: var(--surface-glass-control);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
  --_shadow: var(--shadow-glass); /* so state.css keeps the glass shadow under the focus halo */
  border-radius: var(--radius-panel);
  color: var(--ink);
}
/* Panel tier: text-heavy floating surfaces (place sheet, chat). */
.ll-glass--panel { background: var(--surface-glass-panel); }
/* Round glass: floating buttons and stat chips. */
.ll-glass--round { border-radius: var(--radius-full); }
/* Dark glass over the world (photo, map, flight overlays), white text. No navy shadow: it sits flat on the scene. */
.ll-glass--dark {
  background: var(--surface-glass-dark);
  border-color: var(--border-glass-dark);
  box-shadow: none;
  --_shadow: none;
  color: var(--ink-on-fill);
}

@media (pointer: fine) {
  .ll-glass {
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-glass)) saturate(var(--glass-saturate));
  }
}
@media (pointer: coarse) {
  .ll-glass:not(.ll-glass--dark) { background: var(--surface-glass-panel); }
}
html[data-saver] .ll-glass:not(.ll-glass--dark) { background: var(--surface-glass-panel); }
html[data-saver] .ll-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Solid twin for every translucent surface (eval L3). */
@media (prefers-reduced-transparency: reduce) {
  .ll-glass { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ll-glass--dark { background: var(--surface-dark-solid); }
}
html[data-transparency="reduced"] .ll-glass { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-transparency="reduced"] .ll-glass--dark { background: var(--surface-dark-solid); }

@media (forced-colors: active) {
  .ll-glass { border-color: CanvasText; }
}

/* Level 1: solid surface inside content (.panel-flat today). */
.ll-solid {
  background: var(--paper);
  box-shadow: var(--shadow-flat);
  border-radius: var(--radius-card);
  color: var(--ink);
}

/* Scrims: under a blocking modal, or under a drawer. */
.ll-scrim { position: absolute; inset: 0; background: var(--scrim-modal); }
.ll-scrim--sheet { background: var(--scrim-sheet); }
@media (pointer: fine) {
  .ll-scrim:not(.ll-scrim--sheet) {
    -webkit-backdrop-filter: blur(var(--blur-scrim));
    backdrop-filter: blur(var(--blur-scrim));
  }
}

/* Docs demo hooks: force a fallback on one specimen. Not needed by the app. */
.ll-glass[data-demo-material="phone"]:not(.ll-glass--dark) { background: var(--surface-glass-panel); }
.ll-glass[data-demo-material="phone"],
.ll-glass[data-demo-material="solid"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ll-glass[data-demo-material="solid"] { background: var(--paper); }
.ll-glass--dark[data-demo-material="solid"] { background: var(--surface-dark-solid); }
.ll-glass[data-demo-material="today"] { -webkit-backdrop-filter: none; backdrop-filter: none; }