/* ══════════════════════════════════════════════════════════════
   Keln — the Smooth compositing path.

   Everything here sits behind [data-fx="smooth"], set on <html> by
   theme.js. Nothing in this file applies on the Full path.

   ══ WHY ONE OVERRIDE FILE AND NOT SEVENTY EDITS ═════════════
   `backdrop-filter` appears in about seventy declarations across
   thirty stylesheets. Editing each one to add a Smooth variant
   would mean seventy chances to miss one — and the one missed is
   invisible, because a single blurred element still forces the
   compositor to read back what is behind it. Worse, the NEXT panel
   somebody writes would arrive with a blur that Smooth does not
   know about, and the mode would quietly rot.

   So Smooth turns the blur off in one place, for everything, and
   compensates the handful of surfaces where the blur was actually
   doing visible work. A new glass surface is covered the day it is
   written, without anybody remembering to come back here.

   ══ WHY IT IS BACKDROP-FILTER SPECIFICALLY ══════════════════
   Measured, not assumed. Reducing the blur RADIUS — 18px to 12 to
   8 — changes nothing you can measure: the cost is the readback,
   not the kernel. What moves the number is how many elements have
   one at all. So Smooth removes them rather than softening them.

   ══ WHAT SMOOTH DOES NOT TOUCH ══════════════════════════════
   The palette, the gradients, the borders, the shadows, the star
   field, the orbit, the constellation, the panels, the layout.
   Keln looks like Keln. The glass is still glass — it is a fill
   that reads as glass rather than a live blur of the sky behind
   it, which on a panel already 58-78% opaque is a difference you
   have to go looking for.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. No live blur anywhere ──────────────────────────────────
   `!important` because this is an override layer over thirty
   stylesheets loaded in an order this file does not control. It is
   the one place where the sledgehammer is the correct tool: the
   rule is "no element blurs its backdrop", with no exceptions, and
   a rule with no exceptions should not be able to lose a
   specificity argument to one it has never heard of. */
[data-fx="smooth"] *,
[data-fx="smooth"] *::before,
[data-fx="smooth"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 2. Compensation ───────────────────────────────────────────
   Where the blur was hiding the star field behind a translucent
   surface, a slightly more opaque fill hides it instead. Same hue,
   same two-stop structure, same borders and shadows — a few points
   of alpha, which is what the blur was contributing in the first
   place. */

/* The dashboard panels. */
[data-fx="smooth"] .kcv-panel {
  background: linear-gradient(162deg, rgba(32, 40, 55, .80), rgba(13, 18, 27, .93));
}

/* The sidebar, and the scrim it brings with it. */
[data-fx="smooth"] .sidebar {
  background: linear-gradient(160deg, rgba(30, 38, 52, .95), rgba(12, 17, 25, .97));
}
[data-fx="smooth"] .sidebar-scrim--on { background: rgba(4, 7, 12, .62); }

/* The topbar sits over scrolling content rather than over the sky,
   so it needs the most help: without the blur, text scrolling
   underneath it would otherwise read through. */
[data-fx="smooth"] .topbar { background: rgba(10, 14, 20, .96); }

/* Glass cards — settings, bookings, blog, control. */
[data-fx="smooth"] .glass {
  background: color-mix(in srgb, var(--panel) 100%, transparent);
  background-color: rgba(16, 21, 30, .95);
}

/* The calendar, and the day notebook inside it. Named because this
   is the surface the lag was first noticed on: a full-screen wrap
   with a blur, with a modal carrying another one over the top. */
[data-fx="smooth"] .cal-wrap { background: var(--bg); }
[data-fx="smooth"] .cal-day, [data-fx="smooth"] .kcal-day { background: rgba(4, 7, 12, .82); }

/* Anything that dims the page behind a dialog. A scrim's whole job
   is to obscure, which a slightly darker fill does as well as a
   blur — and it is the largest element on screen when it is up. */
[data-fx="smooth"] .aris-panel,
[data-fx="smooth"] .dossier,
[data-fx="smooth"] .krt__bar,
[data-fx="smooth"] .fs-module {
  background-color: rgba(12, 17, 25, .96);
}

/* ── 3. Cheaper motion ─────────────────────────────────────────
   The atmosphere is the one full-viewport animated surface, and on
   Smooth it runs at a lower rate — see ATMOS_FPS in keln-atmos.js,
   which reads this. Kept as a custom property rather than a second
   copy of the number in JS. */
[data-fx="smooth"] {
  --atmos-fps: 15;
}

/* Grain is a full-viewport blend. It reads as paper texture and
   costs a composite pass for it; on Smooth the ground keeps its
   colour and loses the texture. */
[data-fx="smooth"] .atmos__grain { display: none; }

/* ── 4. Shadows ────────────────────────────────────────────────
   Large soft shadows are a blur too, just an ordinary one. These
   stay — they are cheap next to a backdrop readback, and they are
   most of what makes a panel read as an object rather than a
   rectangle. Halved in spread only where they are largest. */
[data-fx="smooth"] .kcv-panel {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}