/* Glass: Haven's original style (its styles.css and dashboard.css), frosted panels over the
   background art. In Haven this is the base stylesheet; here it's one style among the others. */

[data-style="glass"] body { --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
[data-style="glass"] .card {
  background: linear-gradient(135deg, rgb(var(--hi) / 0.09), rgb(var(--hi) / 0.02) 45%, rgb(var(--hi) / 0.05)), var(--glass);
  border: 1px solid var(--edge);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgb(var(--shade) / calc(0.6 * var(--shade-k))), inset 0 1px 0 rgb(var(--hi) / 0.1);
  backdrop-filter: blur(22px) saturate(115%);
}
[data-style="glass"] .tile {
  border-radius: 22px;
  background: linear-gradient(160deg, rgb(var(--hi) / 0.05), rgb(var(--hi) / 0) 40%), var(--tile);
  box-shadow: 0 12px 34px rgb(var(--shade) / calc(0.35 * var(--shade-k))), inset 0 1px 0 rgb(var(--hi) / 0.05);
  backdrop-filter: blur(18px) saturate(115%);
}
[data-style="glass"] .topbar { background: var(--glass); backdrop-filter: blur(22px) saturate(115%); }
[data-style="glass"] .pill {
  border: 1px solid rgb(var(--ink) / 0.4);
  background: linear-gradient(180deg, rgb(var(--ink) / 0.12), rgb(var(--ink) / 0.03));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgb(var(--hi) / 0.15), 0 4px 14px rgb(var(--shade) / calc(0.35 * var(--shade-k)));
}
[data-style="glass"] .pill:hover:not(:disabled) { background: linear-gradient(180deg, rgb(var(--ink) / 0.2), rgb(var(--ink) / 0.06)); border-color: rgb(var(--ink) / 0.65); }
[data-style="glass"] .pill.ghost { background: transparent; border-color: rgb(var(--ink) / 0.22); box-shadow: none; }
[data-style="glass"] .pill.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
[data-style="glass"] .tabs { background: rgb(var(--shade) / calc(0.3 * var(--well-k))); }
[data-style="glass"] .tab.active { background: rgb(var(--ink) / 0.12); box-shadow: inset 0 1px 0 rgb(var(--hi) / 0.1); }
[data-style="glass"] .search { background: rgb(var(--shade) / calc(0.3 * var(--well-k))); }
[data-style="glass"] .field:focus-within { border-color: rgb(var(--ink) / 0.7); }
[data-style="glass"] .item-row.active { background: color-mix(in srgb, var(--accent) 18%, transparent); }