/* ═══════════════════════════════════════════════════════════════════
   Glass

   One utility, three variants, three guards. Glass is expensive and it
   hurts legibility if it is overused, so this file deliberately ships a
   small vocabulary rather than a set of modifiers per component.

   Allowed on: the sidebar, the app bar, the command palette, the coach
   panel, toasts, and the one lead card on the dashboard. Nothing else.
   Never on a writing surface, a long read, or anything holding an input
   the user types more than a word into.

   Budget: no more than three composited glass surfaces on a screen. The
   sidebar and app bar are never both visible from 960px, so a dashboard
   with a lead card and a toast is still inside the budget.

   Load order: after akoti-theme.css, before app-extras.css.
   ═══════════════════════════════════════════════════════════════════ */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  /* The hairline is what makes glass read as a material. Two of them: a
     light inner edge for the lit top face, a tinted outer for the shape. */
  border: 1px solid var(--glass-hairline);
  box-shadow: inset 0 1px 0 var(--glass-border), var(--glass-shadow);
  color: var(--on-glass);
}
.glass .muted, .glass .akoti-card-subtitle { color: var(--on-glass-variant); }

/* Denser fill for a panel that has real text in it — the palette and the
   coach — where 72% white is not enough to sit text on comfortably. */
.glass-solid {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(1.2);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(1.2);
}

/* A bar, not a panel: the hairline belongs on one edge only. */
.glass-bar {
  border: 0;
  border-bottom: 1px solid var(--glass-hairline);
  box-shadow: inset 0 1px 0 var(--glass-border);
}

/* The dark sidebar needs its own fill; white at 72% over navy is grey mud. */
.glass-dark {
  background: color-mix(in srgb, var(--slate) 86%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 2px 0 18px rgba(34, 34, 42, .18);
  color: #fff;
}

/* The toast stack. The container is empty most of the time, so the glass
   goes to the toasts themselves. Success and failure toasts keep their
   solid semantic colour — a status you must not miss is not translucent. */
.glass-stack > .toast:not(.ok):not(.bad) {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .2);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-stack > .toast:not(.ok):not(.bad) { background: var(--ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-stack > .toast:not(.ok):not(.bad) {
    background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .glass-stack > .toast { animation: none; }
}

/* Focus stays visible on glass. The ring is the darkened blue from
   tokens.css and it gets a white halo so it survives over a pale panel. */
.glass :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .8);
}

/* Motion on glass is opacity and transform only. backdrop-filter is never
   animated — it repaints the whole stacking context every frame. */
.glass, .glass-solid, .glass-dark {
  transition: opacity var(--dur-medium) var(--ease-emphasised),
              transform var(--dur-medium) var(--ease-emphasised);
}

/* ── Guard 1: no backdrop-filter support ───────────────────────────
   Firefox with the pref off, older WebKit, and anything under a remote
   desktop. Fall back to opaque; a semi-transparent panel with no blur is
   just unreadable text over a gradient. */
@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass-solid { background: var(--surface-highest); }
  .glass-dark { background: var(--slate); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-solid { background: var(--surface-highest); }
  .glass-dark { background: var(--slate); }
}

/* ── Guard 2: reduced transparency ─────────────────────────────────
   iOS and macOS "Reduce Transparency", Windows "Transparency effects" off.
   The user has asked for opaque surfaces; give them opaque surfaces and
   keep the hairline so the shape does not vanish with the effect. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-solid {
    background: var(--surface-highest);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line);
  }
  .glass-dark {
    background: var(--slate);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── Guard 3: reduced motion ───────────────────────────────────────
   base.css already flattens durations globally; this states it locally so
   a future edit to that rule cannot quietly reintroduce animated glass. */
@media (prefers-reduced-motion: reduce) {
  .glass, .glass-solid, .glass-dark { transition: none; }
}

/* ── Ink and print ─────────────────────────────────────────────────
   Both are the same instruction: there is no glass on a page you are
   writing on or a page you are printing. */
body.mode-ink .glass,
body.mode-ink .glass-solid {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--line-soft);
  box-shadow: none;
}

@media print {
  .glass, .glass-solid, .glass-dark {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-color: #ddd !important;
    color: #000 !important;
  }
  .mesh { display: none !important; }
}