/* ============================================================
   Occupemo — Glass style mode
   Scoped entirely under html.glass. Inert for clean and paper users.

   ── The rule that decides everything in this file ──────────────────────────

   GLASS GOES ON CHROME. NEVER ON CONTENT.

   Chrome is the furniture: sidebar, bottom nav, modal surface, quick-add bar.
   Content is what the user came to read: schedule blocks, task rows, the
   timeline, to-do items, anything carrying their own words.

   This is both the brand rule and the performance rule, agreeing. `backdrop-
   filter` forces the compositor to sample and blur everything behind an
   element on every frame; putting it on list rows means paying that per row,
   per scroll frame. Confining it to a handful of fixed elements is what keeps
   the schedule page smooth.

   The user is told this in their own words — the Glass tagline reads
   "Frosted menus and bars. Your schedule stays flat." Breaking the rule makes
   that copy a lie, not just a style error.

   ── Law 2 (no gradients — flat print) ──────────────────────────────────────

   Handbook Ch 10, Law 2 governs "brand and content surfaces". Chrome is
   neither, and the blur is not a gradient at all. Exactly ONE declaration in
   this file is a literal gradient — the rim highlight — and it is covered by
   the exemption drafted for Ch 10 (see docs/design/OWNER_HANDOFF_BETA_SPRINT.md
   §1; owner pastes it into node 20:27).

   Everything else here stays inside the law as already written:
     · the inner shadow is NEUTRAL. Tinting it with the accent would make it a
       "coloured shadow", which Law 2 bans outright. Do not tint it.
     · no glows.
     · no gradient reaches a brand or content surface.

   ── Tier 1 only ────────────────────────────────────────────────────────────

   Frost, not refraction. True Liquid Glass bends what is behind it, which on
   the web needs an SVG feDisplacementMap used AS a backdrop-filter — and that
   position is Chrome-only. Safari and Firefox cannot do it. Shipping it would
   mean the mode looks materially different per browser, which is a worse
   outcome than "the glass is frost rather than refraction".
   ============================================================ */

html.glass {
  /* Tunables, so the whole mode can be adjusted from one place.
     Alpha is the only thing separating "frosted" from "smeared". */
  --glass-blur: 14px;
  --glass-saturate: 1.6;

  /* The surface tint. color-mix against the theme's own --color-bg keeps this
     correct in light, dark, AND every Theme Studio palette — none of which
     this file has to know about. */
  --glass-surface: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--color-bg) 86%, transparent);

  /* Neutral, never accent-tinted — see Law 2 note above. */
  --glass-rim: rgba(255, 255, 255, 0.55);
  --glass-inner: rgba(255, 255, 255, 0.18);
  --glass-hairline: color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* Dark mode: the rim is what reads as "an edge catching light". At dark-mode
   luminance a 0.55 white rim looks like a glow — which Law 2 bans — so it
   drops to a hairline.

   B1 (2026-07-29): the auto-mode selector MUST sit behind the media query,
   mirroring styles.css's own `:root:not(.light)` pattern. A default-light
   user carries NEITHER .dark nor .light, so a bare `html.glass:not(.light)`
   matched them and quietly swapped in these faint dark values — which is a
   large part of why selecting Glass appeared to change nothing. */
html.glass.dark {
  --glass-surface: color-mix(in srgb, var(--color-bg) 76%, transparent);
  --glass-surface-strong: color-mix(in srgb, var(--color-bg) 88%, transparent);
  --glass-rim: rgba(255, 255, 255, 0.14);
  --glass-inner: rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  html.glass:not(.light) {
    --glass-surface: color-mix(in srgb, var(--color-bg) 76%, transparent);
    --glass-surface-strong: color-mix(in srgb, var(--color-bg) 88%, transparent);
    --glass-rim: rgba(255, 255, 255, 0.14);
    --glass-inner: rgba(255, 255, 255, 0.06);
  }
}

/* ─── The frost recipe ──────────────────────────────────────────────────────
   Applied only to the four chrome surfaces enumerated below. Deliberately NOT
   written as a utility class: a class invites someone to add it to a row. */

html.glass .sidebar,
html.glass .bottom-nav,
html.glass .modal,
html.glass .quick-add__box {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  background-color: var(--glass-surface);
  border: 1px solid var(--glass-hairline);
  /* Inner shadow for thickness — neutral, per Law 2. */
  box-shadow: inset 0 1px 0 0 var(--glass-inner);
}

/* The rim highlight — THE ONE GRADIENT IN THIS FILE.
   A 1px light edge along the top, fading out. This is what stops the surface
   reading as "translucent rectangle" and starts it reading as "a pane with an
   edge". Covered by the Law 2 exemption drafted for Ch 10.

   Rendered as a pseudo-element rather than a background-image so it composites
   above the backdrop-filter instead of being blurred by it. */
html.glass .sidebar::before,
html.glass .bottom-nav::before,
html.glass .modal::before,
html.glass .quick-add__box::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glass-rim) 18%,
    var(--glass-rim) 82%,
    transparent 100%
  );
  pointer-events: none;
  /* Follow the host's corner so the rim does not overhang a rounded edge. */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* Positioning context for ::before — but ONLY where one is missing. The
   sidebar is `sticky` and the bottom nav `fixed`: both already position
   their pseudo-elements, and the blanket `relative` this rule used to set
   silently un-stuck the one and un-fixed the other (B1, 2026-07-29). The
   modal ships `relative` from styles.css; the quick-add box is the one
   surface with no positioning of its own. */
html.glass .quick-add__box {
  position: relative;
}

/* The modal surface sits over a dimmed overlay, so it needs more opacity to
   keep body text at its normal contrast — Law 4 is not negotiable for the sake
   of the effect. */
html.glass .modal {
  background-color: var(--glass-surface-strong);
}

/* The overlay already blurs (styles.css ships backdrop-filter: blur(4px) on
   .modal-overlay, and predates this mode). Deepen it so the modal reads as
   glass over glass rather than glass over a grey sheet. */
html.glass .modal-overlay {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ─── The escape hatches ────────────────────────────────────────────────────

   Handbook Ch 10, Law 4. Three independent routes back to a flat surface,
   because none of them is sufficient on its own:

     1. prefers-reduced-transparency — the correct signal, unevenly supported.
     2. prefers-contrast: more — a different need with the same remedy.
     3. html.reduce-transparency — the in-app switch, for the person whose
        browser reports neither. "Upgrade your browser" is not an
        accessibility strategy.

   In every case the fallback is the FLAT CLEAN SURFACE, not a half-transparent
   compromise. A 90%-opaque panel still fails the person who asked for this.

   `background-color` is reset to var(--color-bg) rather than left to cascade,
   because the rules above set it explicitly and would otherwise win. */

@media (prefers-reduced-transparency: reduce) {
  html.glass .sidebar,
  html.glass .bottom-nav,
  html.glass .modal,
  html.glass .quick-add__box,
  html.glass .modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.glass .sidebar,
  html.glass .bottom-nav,
  html.glass .modal,
  html.glass .quick-add__box {
    background-color: var(--color-bg);
    box-shadow: none;
  }
  html.glass .sidebar::before,
  html.glass .bottom-nav::before,
  html.glass .modal::before,
  html.glass .quick-add__box::before {
    display: none;
  }
}

@media (prefers-contrast: more) {
  html.glass .sidebar,
  html.glass .bottom-nav,
  html.glass .modal,
  html.glass .quick-add__box,
  html.glass .modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.glass .sidebar,
  html.glass .bottom-nav,
  html.glass .modal,
  html.glass .quick-add__box {
    background-color: var(--color-bg);
    box-shadow: none;
  }
  html.glass .sidebar::before,
  html.glass .bottom-nav::before,
  html.glass .modal::before,
  html.glass .quick-add__box::before {
    display: none;
  }
}

/* The in-app switch. Same result, reachable by anyone. */
html.glass.reduce-transparency .sidebar,
html.glass.reduce-transparency .bottom-nav,
html.glass.reduce-transparency .modal,
html.glass.reduce-transparency .quick-add__box,
html.glass.reduce-transparency .modal-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.glass.reduce-transparency .sidebar,
html.glass.reduce-transparency .bottom-nav,
html.glass.reduce-transparency .modal,
html.glass.reduce-transparency .quick-add__box {
  background-color: var(--color-bg);
  box-shadow: none;
}

html.glass.reduce-transparency .sidebar::before,
html.glass.reduce-transparency .bottom-nav::before,
html.glass.reduce-transparency .modal::before,
html.glass.reduce-transparency .quick-add__box::before {
  display: none;
}

/* Browsers without backdrop-filter at all get the flat surface too, rather
   than a transparent panel with text floating over the page behind it —
   which is a legibility failure, not a degraded effect. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.glass .sidebar,
  html.glass .bottom-nav,
  html.glass .modal,
  html.glass .quick-add__box {
    background-color: var(--color-bg);
  }
}