/* ==========================================================================
   PNLE-REVIEW — Liquid glass
   Loaded last on every page. Clear, iPhone-style glass (see "Crystal clear"
   at the end) over a soft,
   colourful background: the sidebar, main panel and dialogs blur what's
   behind them; cards are lighter glass layers on top, with a bright top
   edge. Light mode is a shade darker than the original theme.
   Delete this file's <link> tags to go back to the solid look.
   ========================================================================== */

/* ---------------- Light: a little darker, glassy tokens ---------------- */
:root {
  --bg: #aebcdc;
  --bg-glow-a: #c7b4e6;
  --bg-glow-b: #9fb6e6;
  --bg-glow-c: #e4b5cc;
  --panel: rgba(214, 223, 244, 0.5);
  --panel-border: rgba(255, 255, 255, 0.5);
  --card: rgba(236, 241, 252, 0.52);
  --card-solid: rgba(240, 244, 253, 0.8);
  --card-border: rgba(255, 255, 255, 0.55);
  --subtle: rgba(255, 255, 255, 0.34);
  --subtle-2: rgba(255, 255, 255, 0.26);
  --line: rgba(28, 49, 99, 0.1);
  --track: rgba(28, 49, 99, 0.1);
  --primary-softer: rgba(60, 111, 212, 0.1);
  --primary-soft: rgba(60, 111, 212, 0.18);
  --text: #172b5a;
  --text-2: #33456e;
  --muted: #6a7798;
  --shadow: 0 10px 30px rgba(36, 58, 120, 0.14), 0 1px 2px rgba(36, 58, 120, 0.08);
  --glass-blur: blur(22px) saturate(165%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  --glass-shine: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0) 60%);
}

/* ---------------- Dark: glass over deep indigo light ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1124;
    --bg-glow-a: #2a1f5c;
    --bg-glow-b: #0f2a5a;
    --bg-glow-c: #3d1d4f;
    --panel: rgba(18, 27, 52, 0.55);
    --panel-border: rgba(255, 255, 255, 0.09);
    --card: rgba(34, 47, 86, 0.48);
    --card-solid: rgba(30, 42, 78, 0.82);
    --card-border: rgba(255, 255, 255, 0.1);
    --subtle: rgba(255, 255, 255, 0.05);
    --subtle-2: rgba(255, 255, 255, 0.07);
    --line: rgba(255, 255, 255, 0.08);
    --track: rgba(255, 255, 255, 0.1);
    --primary-softer: rgba(108, 156, 242, 0.12);
    --primary-soft: rgba(108, 156, 242, 0.22);
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    --glass-shine: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 60%);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1124;
  --bg-glow-a: #2a1f5c;
  --bg-glow-b: #0f2a5a;
  --bg-glow-c: #3d1d4f;
  --panel: rgba(18, 27, 52, 0.55);
  --panel-border: rgba(255, 255, 255, 0.09);
  --card: rgba(34, 47, 86, 0.48);
  --card-solid: rgba(30, 42, 78, 0.82);
  --card-border: rgba(255, 255, 255, 0.1);
  --subtle: rgba(255, 255, 255, 0.05);
  --subtle-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --track: rgba(255, 255, 255, 0.1);
  --primary-softer: rgba(108, 156, 242, 0.12);
  --primary-soft: rgba(108, 156, 242, 0.22);
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --glass-shine: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 60%);
}

/* ---------------- Background the glass refracts ---------------- */
body {
  background:
    radial-gradient(900px 620px at 8% 4%, var(--bg-glow-a), transparent 62%),
    radial-gradient(780px 560px at 92% 12%, var(--bg-glow-c), transparent 60%),
    radial-gradient(1000px 760px at 70% 100%, var(--bg-glow-b), transparent 62%),
    radial-gradient(700px 520px at 18% 96%, var(--bg-glow-b), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------------- Big panes: real frosted glass ---------------- */
.sidebar,
.main,
.modal,
.pdf-viewer,
.menu,
.account-menu,
.gen-pill,
.toast {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.sidebar,
.main {
  background: var(--glass-shine), var(--panel);
  border-color: var(--panel-border);
  box-shadow: var(--shadow), var(--glass-edge);
}

/* Dialogs float above the page: a little more opaque so text stays easy to read. */
.modal,
.pdf-viewer {
  background: var(--glass-shine), var(--card-solid);
  border: 1px solid var(--card-border);
  box-shadow: 0 30px 70px rgba(20, 30, 70, 0.32), var(--glass-edge);
}
.modal::backdrop,
.pdf-viewer::backdrop { background: rgba(14, 22, 48, 0.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu,
.account-menu {
  background: var(--glass-shine), var(--card-solid);
  border-color: var(--card-border);
  box-shadow: 0 18px 44px rgba(20, 30, 70, 0.22), var(--glass-edge);
}
.gen-pill { background: var(--glass-shine), var(--card-solid); box-shadow: 0 14px 34px rgba(20, 30, 70, 0.24), var(--glass-edge); }

/* ---------------- Cards: lighter glass layers inside the panes ---------------- */
.card {
  background: var(--glass-shine), var(--card);
  border-color: var(--card-border);
  box-shadow: 0 6px 20px rgba(36, 58, 120, 0.08), var(--glass-edge);
}

/* Rows, inputs and small surfaces pick up the glass tokens through --card-solid
   / --subtle; give the common ones the same bright edge. */
.search,
.select select,
.form-field input,
.form-field .select select,
.chip,
.btn--outline,
.icon-btn {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chip:not(.is-active),
.btn--outline { background-color: rgba(255, 255, 255, 0.28); }
:root[data-theme="dark"] .chip:not(.is-active),
:root[data-theme="dark"] .btn--outline { background-color: rgba(255, 255, 255, 0.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip:not(.is-active),
  :root:not([data-theme="light"]) .btn--outline { background-color: rgba(255, 255, 255, 0.04); }
}

/* Primary buttons: a glossy top highlight, like a glass pill. */
.btn--primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #4b7cd9 0%, #2f5fbe 100%);
  box-shadow: 0 8px 18px rgba(44, 88, 181, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Older devices without backdrop-filter: fall back to more solid surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --panel: rgba(232, 238, 250, 0.96); --card: rgba(255, 255, 255, 0.9); --card-solid: #ffffff; }
  :root[data-theme="dark"] { --panel: rgba(18, 27, 52, 0.96); --card: rgba(30, 42, 78, 0.94); --card-solid: #1b2644; }
}

/* Less motion / less transparency preferences: keep it calm and readable. */
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .main, .card, .modal, .menu, .account-menu { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root { --panel: rgba(232, 238, 250, 0.97); --card: rgba(255, 255, 255, 0.92); }
}

/* ==========================================================================
   Crystal clear (iPhone-style Liquid Glass)
   Almost no frost: surfaces are mostly see-through and read as glass through
   bright rims and a curved highlight, while a light blur + colour boost keeps
   the background soft enough to read text over. Dialogs, menus and fields
   stay a little more opaque so what you type and read is always clear.
   ========================================================================== */
:root {
  --bg: #a3b6de;
  --bg-glow-a: #b89cec;
  --bg-glow-b: #7ea6ef;
  --bg-glow-c: #f2a7c8;
  --bg-glow-d: #8fd6d2;
  --panel: rgba(255, 255, 255, 0.14);
  --panel-border: rgba(255, 255, 255, 0.55);
  --card: rgba(255, 255, 255, 0.2);
  --card-solid: rgba(255, 255, 255, 0.6);
  --card-border: rgba(255, 255, 255, 0.6);
  --subtle: rgba(255, 255, 255, 0.24);
  --subtle-2: rgba(255, 255, 255, 0.18);
  --line: rgba(23, 43, 90, 0.1);
  --glass-blur: blur(10px) saturate(190%) brightness(1.04);
  --glass-edge:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 0 rgba(255, 255, 255, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.16);
  --glass-shine:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 30%);
  /* Tinted tiles become coloured clear glass */
  --tint-green: linear-gradient(180deg, rgba(214, 245, 231, 0.5) 0%, rgba(214, 245, 231, 0.22) 100%);
  --tint-orange: linear-gradient(180deg, rgba(255, 232, 205, 0.5) 0%, rgba(255, 232, 205, 0.22) 100%);
  --tint-pink: linear-gradient(180deg, rgba(253, 216, 230, 0.5) 0%, rgba(253, 216, 230, 0.22) 100%);
  --tint-rose: linear-gradient(180deg, rgba(243, 220, 246, 0.5) 0%, rgba(243, 220, 246, 0.22) 100%);
  --tint-green-border: rgba(255, 255, 255, 0.6);
  --tint-orange-border: rgba(255, 255, 255, 0.6);
  --tint-pink-border: rgba(255, 255, 255, 0.6);
  --tint-rose-border: rgba(255, 255, 255, 0.6);
  --tint-blue: rgba(226, 236, 253, 0.45);
  --tint-purple: rgba(236, 228, 251, 0.45);
  --tint-sky: rgba(224, 240, 251, 0.45);
  --tint-peach: rgba(255, 238, 214, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070d1f;
    --bg-glow-a: #3b2380;
    --bg-glow-b: #123a80;
    --bg-glow-c: #5a1f62;
    --bg-glow-d: #0f4b55;
    --panel: rgba(255, 255, 255, 0.045);
    --panel-border: rgba(255, 255, 255, 0.16);
    --card: rgba(255, 255, 255, 0.06);
    --card-solid: rgba(24, 34, 66, 0.72);
    --card-border: rgba(255, 255, 255, 0.14);
    --subtle: rgba(255, 255, 255, 0.06);
    --subtle-2: rgba(255, 255, 255, 0.08);
    --glass-edge:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      inset 1px 0 0 rgba(255, 255, 255, 0.09),
      inset 0 0 18px rgba(255, 255, 255, 0.04);
    --glass-shine:
      radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%);
    --tint-green: linear-gradient(180deg, rgba(60, 170, 140, 0.22) 0%, rgba(60, 170, 140, 0.08) 100%);
    --tint-orange: linear-gradient(180deg, rgba(240, 160, 80, 0.22) 0%, rgba(240, 160, 80, 0.08) 100%);
    --tint-pink: linear-gradient(180deg, rgba(230, 90, 150, 0.22) 0%, rgba(230, 90, 150, 0.08) 100%);
    --tint-rose: linear-gradient(180deg, rgba(170, 110, 230, 0.22) 0%, rgba(170, 110, 230, 0.08) 100%);
    --tint-green-border: rgba(255, 255, 255, 0.12);
    --tint-orange-border: rgba(255, 255, 255, 0.12);
    --tint-pink-border: rgba(255, 255, 255, 0.12);
    --tint-rose-border: rgba(255, 255, 255, 0.12);
  }
}
:root[data-theme="dark"] {
  --bg: #070d1f;
  --bg-glow-a: #3b2380;
  --bg-glow-b: #123a80;
  --bg-glow-c: #5a1f62;
  --bg-glow-d: #0f4b55;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-border: rgba(255, 255, 255, 0.16);
  --card: rgba(255, 255, 255, 0.06);
  --card-solid: rgba(24, 34, 66, 0.72);
  --card-border: rgba(255, 255, 255, 0.14);
  --subtle: rgba(255, 255, 255, 0.06);
  --subtle-2: rgba(255, 255, 255, 0.08);
  --glass-edge:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset 0 0 18px rgba(255, 255, 255, 0.04);
  --glass-shine:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%);
  --tint-green: linear-gradient(180deg, rgba(60, 170, 140, 0.22) 0%, rgba(60, 170, 140, 0.08) 100%);
  --tint-orange: linear-gradient(180deg, rgba(240, 160, 80, 0.22) 0%, rgba(240, 160, 80, 0.08) 100%);
  --tint-pink: linear-gradient(180deg, rgba(230, 90, 150, 0.22) 0%, rgba(230, 90, 150, 0.08) 100%);
  --tint-rose: linear-gradient(180deg, rgba(170, 110, 230, 0.22) 0%, rgba(170, 110, 230, 0.08) 100%);
  --tint-green-border: rgba(255, 255, 255, 0.12);
  --tint-orange-border: rgba(255, 255, 255, 0.12);
  --tint-pink-border: rgba(255, 255, 255, 0.12);
  --tint-rose-border: rgba(255, 255, 255, 0.12);
}

/* More colour behind the glass, so its clearness shows (like a phone wallpaper). */
body {
  background:
    radial-gradient(760px 560px at 6% 0%, var(--bg-glow-a), transparent 64%),
    radial-gradient(680px 520px at 96% 6%, var(--bg-glow-c), transparent 62%),
    radial-gradient(820px 640px at 62% 104%, var(--bg-glow-b), transparent 64%),
    radial-gradient(560px 460px at 30% 70%, var(--bg-glow-d), transparent 66%),
    radial-gradient(600px 480px at 0% 100%, var(--bg-glow-b), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* Cards: clear glass with their own light blur, so text over busy colour stays crisp. */
.card {
  -webkit-backdrop-filter: blur(6px) saturate(170%);
  backdrop-filter: blur(6px) saturate(170%);
  box-shadow: 0 8px 24px rgba(30, 50, 110, 0.1), var(--glass-edge);
}
.sidebar, .main { box-shadow: 0 18px 50px rgba(30, 50, 110, 0.16), var(--glass-edge); }

/* Text on clear glass: a whisper of shadow keeps headings readable over colour. */
.card__title, .greeting__title, .page-title { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35); }
:root[data-theme="dark"] .card__title, :root[data-theme="dark"] .greeting__title, :root[data-theme="dark"] .page-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card__title, :root:not([data-theme="light"]) .greeting__title, :root:not([data-theme="light"]) .page-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
}

/* ==========================================================================
   Blur on a layer behind each pane, not on the pane itself.
   A backdrop-filter on an element turns it into the frame for anything
   position: fixed inside it, so ⋮ menus and filter menus (placed with fixed
   coordinates) opened in the wrong spot and were cut off by the card. The
   blur now lives on a ::before layer behind the content; the glass looks the
   same and menus float freely again.
   ========================================================================== */
.sidebar,
.main,
.card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}
.main { position: relative; }
.sidebar::before,
.main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
}

/* ==========================================================================
   Light mode, darker: deeper wallpaper colours and a slightly smoky glass,
   so it isn't so bright. Cards keep enough body for dark text to read well.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  --bg: #8297c6;
  --bg-glow-a: #9d82d8;
  --bg-glow-b: #5d86d8;
  --bg-glow-c: #d68aaf;
  --bg-glow-d: #66b4b3;
  --panel: rgba(225, 232, 248, 0.16);
  --panel-border: rgba(255, 255, 255, 0.42);
  --card: rgba(232, 238, 251, 0.34);
  --card-solid: rgba(236, 241, 252, 0.74);
  --card-border: rgba(255, 255, 255, 0.45);
  --subtle: rgba(255, 255, 255, 0.22);
  --subtle-2: rgba(255, 255, 255, 0.16);
  --line: rgba(20, 36, 80, 0.13);
  --track: rgba(20, 36, 80, 0.14);
  --text: #12244d;
  --text-2: #263a66;
  --muted: #4d5d84;
  --glass-blur: blur(12px) saturate(170%) brightness(0.98);
  --glass-edge:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 18px rgba(255, 255, 255, 0.1);
  --glass-shine:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%);
  --tint-green: linear-gradient(180deg, rgba(200, 240, 222, 0.5) 0%, rgba(200, 240, 222, 0.26) 100%);
  --tint-orange: linear-gradient(180deg, rgba(255, 224, 190, 0.5) 0%, rgba(255, 224, 190, 0.26) 100%);
  --tint-pink: linear-gradient(180deg, rgba(250, 205, 222, 0.5) 0%, rgba(250, 205, 222, 0.26) 100%);
  --tint-rose: linear-gradient(180deg, rgba(236, 210, 244, 0.5) 0%, rgba(236, 210, 244, 0.26) 100%);
}
/* The OS dark setting still wins unless the app is forced to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #070d1f;
    --bg-glow-a: #3b2380;
    --bg-glow-b: #123a80;
    --bg-glow-c: #5a1f62;
    --bg-glow-d: #0f4b55;
    --panel: rgba(255, 255, 255, 0.045);
    --panel-border: rgba(255, 255, 255, 0.16);
    --card: rgba(255, 255, 255, 0.06);
    --card-solid: rgba(24, 34, 66, 0.72);
    --card-border: rgba(255, 255, 255, 0.14);
    --subtle: rgba(255, 255, 255, 0.06);
    --subtle-2: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.08);
    --track: rgba(255, 255, 255, 0.1);
    --text: #e6ecfb;
    --text-2: #c2cdea;
    --muted: #8f9cc0;
    --glass-blur: blur(10px) saturate(190%) brightness(1.04);
    --glass-edge:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      inset 1px 0 0 rgba(255, 255, 255, 0.09),
      inset 0 0 18px rgba(255, 255, 255, 0.04);
    --glass-shine:
      radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%);
    --tint-green: linear-gradient(180deg, rgba(60, 170, 140, 0.22) 0%, rgba(60, 170, 140, 0.08) 100%);
    --tint-orange: linear-gradient(180deg, rgba(240, 160, 80, 0.22) 0%, rgba(240, 160, 80, 0.08) 100%);
    --tint-pink: linear-gradient(180deg, rgba(230, 90, 150, 0.22) 0%, rgba(230, 90, 150, 0.08) 100%);
    --tint-rose: linear-gradient(180deg, rgba(170, 110, 230, 0.22) 0%, rgba(170, 110, 230, 0.08) 100%);
  }
}

/* Dark: calmer colour boost behind the glass (less neon) */
:root[data-theme="dark"] { --glass-blur: blur(14px) saturate(135%); --bg-glow-a: #33206e; --bg-glow-c: #4a1c56; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass-blur: blur(14px) saturate(135%); --bg-glow-a: #33206e; --bg-glow-c: #4a1c56; }
}

/* ==========================================================================
   Visible pane edges: a bright glass rim plus a thin dark outline, so the
   sidebar, main panel and cards keep a clear border on any background.
   ========================================================================== */
:root {
  --rim: rgba(255, 255, 255, 0.72);
  --rim-outline: rgba(18, 34, 78, 0.16);
}
:root[data-theme="dark"] { --rim: rgba(255, 255, 255, 0.2); --rim-outline: rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rim: rgba(255, 255, 255, 0.2); --rim-outline: rgba(0, 0, 0, 0.45); }
}
.sidebar,
.main {
  border: 1px solid var(--rim);
  box-shadow: 0 0 0 1px var(--rim-outline), 0 18px 50px rgba(20, 36, 90, 0.18), var(--glass-edge);
}
.card {
  border: 1px solid var(--rim);
  box-shadow: 0 0 0 1px var(--rim-outline), 0 8px 24px rgba(20, 36, 90, 0.1), var(--glass-edge);
}

/* The blur layer (::before) must stay inside its pane. In fit mode and on
   small screens the sidebar is position: static, so the layer spread over the
   whole page and blurred the sidebar's own border away. relative keeps it in. */
.is-fit .sidebar { position: relative; top: 0; }
@media (max-width: 1024px) { .sidebar { position: relative; top: 0; } }

/* ==========================================================================
   Smooth page changes (no blink)
   Each sidebar link opens a new page. Cross-document view transitions keep
   the old page on screen until the new one is ready, then cross-fade; the
   sidebar is pinned so only the content changes. The <html> background is
   painted in the theme colour from the first frame, so there's never a white
   flash. Browsers without view transitions (e.g. Firefox) just switch pages.
   ========================================================================== */
@view-transition { navigation: auto; }

html { background: #8297c6; }
:root[data-theme="dark"] { background: #070d1f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { background: #070d1f; } }

.sidebar { view-transition-name: pnle-sidebar; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: ease-out; }
::view-transition-group(pnle-sidebar) { animation: none; }
::view-transition-old(pnle-sidebar) { display: none; }
::view-transition-new(pnle-sidebar) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}