/* ==========================================================
   Liquid glass everywhere (Account menu > Appearance > Liquid glass).
   Wallpapers, mesh backgrounds and per-background accents copied from Obolo
   (~/Documents/Gbolahan/styles.css); Barlow rules below them.
   The rota grid itself is never glass: it sits on a frosted page panel.
   ========================================================== */
/* ---------- Liquid glass everywhere (Settings › Glass › Everywhere) ----------
   A flat wallpaper of pale leaves sits behind; the sidebar floats as a glass pane and
   every surface (bubbles, code, tables, drafts, chips, toolbar) is frosted glass. */
:root{--wall-thumb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%23e8eee2' d='M-60 720C160 470 470 430 700 540 470 690 190 790-60 720Z'/><path fill='%23edf1e7' d='M1500 120C1290 330 990 350 770 250 1000 110 1270 40 1500 120Z'/><path fill='%23e4ebdd' d='M1180 960C1150 760 1260 610 1440 560 1460 740 1360 880 1180 960Z'/><path fill='%23edf1e7' d='M140-40C300 90 330 250 250 400 110 280 70 110 140-40Z'/><circle fill='%23e4ebdd' cx='1060' cy='640' r='120'/></svg>")}
:root[data-glass="all"]{--wall:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%23e8eee2' d='M-60 720C160 470 470 430 700 540 470 690 190 790-60 720Z'/><path fill='%23edf1e7' d='M1500 120C1290 330 990 350 770 250 1000 110 1270 40 1500 120Z'/><path fill='%23e4ebdd' d='M1180 960C1150 760 1260 610 1440 560 1460 740 1360 880 1180 960Z'/><path fill='%23edf1e7' d='M140-40C300 90 330 250 250 400 110 280 70 110 140-40Z'/><circle fill='%23e4ebdd' cx='1060' cy='640' r='120'/></svg>")}
@media (prefers-color-scheme: dark){:root[data-glass="all"]:not([data-theme="light"]){--wall:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%232d332c' d='M-60 720C160 470 470 430 700 540 470 690 190 790-60 720Z'/><path fill='%232a2f29' d='M1500 120C1290 330 990 350 770 250 1000 110 1270 40 1500 120Z'/><path fill='%2330372f' d='M1180 960C1150 760 1260 610 1440 560 1460 740 1360 880 1180 960Z'/><path fill='%232a2f29' d='M140-40C300 90 330 250 250 400 110 280 70 110 140-40Z'/><circle fill='%2330372f' cx='1060' cy='640' r='120'/></svg>")}}
:root[data-glass="all"][data-theme="dark"]{--wall:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%232d332c' d='M-60 720C160 470 470 430 700 540 470 690 190 790-60 720Z'/><path fill='%232a2f29' d='M1500 120C1290 330 990 350 770 250 1000 110 1270 40 1500 120Z'/><path fill='%2330372f' d='M1180 960C1150 760 1260 610 1440 560 1460 740 1360 880 1180 960Z'/><path fill='%232a2f29' d='M140-40C300 90 330 250 250 400 110 280 70 110 140-40Z'/><circle fill='%2330372f' cx='1060' cy='640' r='120'/></svg>")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--wall-thumb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%232d332c' d='M-60 720C160 470 470 430 700 540 470 690 190 790-60 720Z'/><path fill='%232a2f29' d='M1500 120C1290 330 990 350 770 250 1000 110 1270 40 1500 120Z'/><path fill='%2330372f' d='M1180 960C1150 760 1260 610 1440 560 1460 740 1360 880 1180 960Z'/><path fill='%232a2f29' d='M140-40C300 90 330 250 250 400 110 280 70 110 140-40Z'/><circle fill='%2330372f' cx='1060' cy='640' r='120'/></svg>")}}
:root[data-theme="dark"]{--wall-thumb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'><path fill='%232d332c' d='M-60 720C160 470 470 430 700 540 470 690 190 790-60 720Z'/><path fill='%232a2f29' d='M1500 120C1290 330 990 350 770 250 1000 110 1270 40 1500 120Z'/><path fill='%2330372f' d='M1180 960C1150 760 1260 610 1440 560 1460 740 1360 880 1180 960Z'/><path fill='%232a2f29' d='M140-40C300 90 330 250 250 400 110 280 70 110 140-40Z'/><circle fill='%2330372f' cx='1060' cy='640' r='120'/></svg>")}
/* Backgrounds for glass everywhere (Settings › Background). Mesh presets are soft colour fields with film grain. */
:root{--w-meadow:radial-gradient(38% 48% at 12% 28%,#1d4f22 0%,transparent 70%),radial-gradient(34% 40% at 30% 55%,#2f6e2c 0%,transparent 70%),radial-gradient(42% 42% at 82% 10%,#f3bf93 0%,transparent 70%),radial-gradient(30% 38% at 96% 48%,#3f86c4 0%,transparent 70%),radial-gradient(36% 32% at 50% 62%,#cfae2c 0%,transparent 70%),radial-gradient(40% 40% at 18% 92%,#a9bcc2 0%,transparent 70%),radial-gradient(42% 42% at 78% 90%,#2a6526 0%,transparent 70%),radial-gradient(30% 30% at 60% 30%,#8fae5a 0%,transparent 70%),#5d7d3e;--w-dusk:radial-gradient(40% 45% at 15% 25%,#5b3d8f 0%,transparent 70%),radial-gradient(40% 40% at 85% 15%,#f5a35c 0%,transparent 70%),radial-gradient(35% 40% at 70% 55%,#e58fb5 0%,transparent 70%),radial-gradient(45% 45% at 20% 85%,#1f2a5c 0%,transparent 70%),radial-gradient(35% 35% at 90% 90%,#f7c9a3 0%,transparent 70%),#7b4f8f;--w-ocean:radial-gradient(40% 45% at 10% 20%,#0f4c6b 0%,transparent 70%),radial-gradient(38% 40% at 80% 20%,#8fd3e0 0%,transparent 70%),radial-gradient(40% 40% at 55% 60%,#2d8fb3 0%,transparent 70%),radial-gradient(40% 40% at 15% 90%,#1c6b5a 0%,transparent 70%),radial-gradient(35% 35% at 92% 88%,#d9f0f2 0%,transparent 70%),#2a6f8f;--w-sand:radial-gradient(40% 45% at 12% 20%,#f3e3c7 0%,transparent 70%),radial-gradient(38% 40% at 85% 15%,#d8b48a 0%,transparent 70%),radial-gradient(40% 40% at 55% 65%,#e8d2b0 0%,transparent 70%),radial-gradient(40% 40% at 15% 90%,#c9d6c1 0%,transparent 70%),radial-gradient(35% 35% at 90% 90%,#f7efe2 0%,transparent 70%),#e2cfb1;--w-graphite:radial-gradient(40% 45% at 15% 20%,#3e4a44 0%,transparent 70%),radial-gradient(38% 40% at 85% 20%,#545a57 0%,transparent 70%),radial-gradient(40% 40% at 50% 65%,#1f2321 0%,transparent 70%),radial-gradient(40% 40% at 15% 90%,#6b7a70 0%,transparent 70%),radial-gradient(35% 35% at 90% 88%,#2b2d2c 0%,transparent 70%),#333836;--w-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.2' intercept='-.6'/><feFuncG type='linear' slope='2.2' intercept='-.6'/><feFuncB type='linear' slope='2.2' intercept='-.6'/><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-glass="all"] .ambient{background:var(--bg) var(--wall) center/cover no-repeat}
:root[data-glass="all"][data-wall="plain"] .ambient{background:var(--bg)}
:root[data-glass="all"][data-wall="meadow"] .ambient,.wall-sw.w-meadow{background:var(--w-meadow)}
:root[data-glass="all"][data-wall="dusk"] .ambient,.wall-sw.w-dusk{background:var(--w-dusk)}
:root[data-glass="all"][data-wall="ocean"] .ambient,.wall-sw.w-ocean{background:var(--w-ocean)}
:root[data-glass="all"][data-wall="sand"] .ambient,.wall-sw.w-sand{background:var(--w-sand)}
:root[data-glass="all"][data-wall="graphite"] .ambient,.wall-sw.w-graphite{background:var(--w-graphite)}
.wall-sw.w-leaves{background:var(--bg) var(--wall-thumb) center/cover}
.wall-sw.w-plain{background:var(--bg)}
:root[data-glass="all"][data-wall="photo"] .ambient{background-color:var(--bg);background-size:cover;background-position:center}
/* Film grain on the mesh backgrounds and their swatches */
:root[data-glass="all"]:is([data-wall="meadow"],[data-wall="dusk"],[data-wall="ocean"],[data-wall="sand"],[data-wall="graphite"]) .ambient::after,
.wall-sw:is(.w-meadow,.w-dusk,.w-ocean,.w-sand,.w-graphite)::after{content:"";position:absolute;inset:0;background-image:var(--w-grain);background-size:180px;opacity:.3;mix-blend-mode:overlay;pointer-events:none}
/* Dark mode dims colourful backgrounds a little */
:root[data-glass="all"][data-theme="dark"]:not([data-wall="plain"]) .ambient::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}
@media (prefers-color-scheme: dark){:root[data-glass="all"]:not([data-theme="light"]):not([data-wall="plain"]) .ambient::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34)}}
/* The colour scheme follows the background: each one sets its own accent (--wa-l light, --wa-d dark,
   --wa-ink text on the dark accent). Softer shades and the reading surfaces are mixed from it.
   Your own photo gets its accent picked from the photo (--pa-*, set by photoTone() in app.js). */
:root[data-glass="all"]{--wa-l:#2e6b4e;--wa-d:#5fae84;--wa-ink:#0f2418}
:root[data-glass="all"][data-wall="dusk"]{--wa-l:#6a4c9c;--wa-d:#b89be3;--wa-ink:#1e1530}
:root[data-glass="all"][data-wall="ocean"]{--wa-l:#1d6a86;--wa-d:#72bfd8;--wa-ink:#0a2230}
:root[data-glass="all"][data-wall="sand"]{--wa-l:#99653a;--wa-d:#dcac7a;--wa-ink:#2b1b0c}
:root[data-glass="all"][data-wall="graphite"]{--wa-l:#4b5752;--wa-d:#b0bdb6;--wa-ink:#151917}
:root[data-glass="all"][data-wall="photo"]{--wa-l:var(--pa-l,#2e6b4e);--wa-d:var(--pa-d,#5fae84);--wa-ink:var(--pa-ink,#0f2418)}
:root[data-glass="all"]{--accent:var(--wa-l);--accent-2:color-mix(in srgb,var(--wa-l) 82%,#fff);--accent-ink:#fff;
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);--accent-ring:color-mix(in srgb,var(--accent) 22%,transparent);
  --glass-read:color-mix(in srgb,var(--wa-l) 7%,rgba(255,255,255,.8))}
@media (prefers-color-scheme: dark){:root[data-glass="all"]:not([data-theme="light"]){--accent:var(--wa-d);--accent-2:color-mix(in srgb,var(--wa-d) 82%,#fff);--accent-ink:var(--wa-ink);--glass-read:color-mix(in srgb,var(--wa-d) 8%,rgba(38,38,36,.8))}}
:root[data-glass="all"][data-theme="dark"]{--accent:var(--wa-d);--accent-2:color-mix(in srgb,var(--wa-d) 82%,#fff);--accent-ink:var(--wa-ink);--glass-read:color-mix(in srgb,var(--wa-d) 8%,rgba(38,38,36,.8))}
:root[data-glass="all"] #side{background:var(--glass-read)}

/* ---------- Barlow: what turns to glass ---------- */
.ambient{position:fixed;inset:0;z-index:-1;background:var(--bg);overflow:hidden;pointer-events:none}
:root[data-glass="all"] body{background:transparent}
/* The sidebar floats as a glass pane over the wallpaper */
:root[data-glass="all"] #side{margin:8px 0 8px 8px;border-radius:22px;border:0;box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
:root[data-glass="all"] .side-foot{border-top-color:transparent;border-radius:0 0 22px 22px}
/* Pages sit on a frosted panel, so the rota grid and tables stay crisp and readable */
:root[data-glass="all"] .page{background:var(--glass-read);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
  box-shadow:var(--glass-shadow);border-radius:24px;margin-top:64px;margin-bottom:24px;padding:26px 28px 34px}
:root[data-glass="all"] .page.wide{max-width:min(1240px,calc(100% - 32px))}
:root[data-glass="all"] .page.huddle-page{margin:64px 16px 16px}
/* Cards, tiles and day panels become clear glass on the panel */
:root[data-glass="all"] :is(.in-card,.in-tile,.card,.side-card,.flag-day,.td-slot,.hd-card,.hd-panel){
  background:color-mix(in srgb,var(--glass-bg) 70%,transparent);box-shadow:inset 0 0 0 1px var(--rim-b),var(--shadow-sm)}
:root[data-glass="all"] main.scrolled header{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)}
:root[data-glass="all"] .nav-item.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ink)}
@media (max-width:760px){
  :root[data-glass="all"] #side{margin:8px}
  :root[data-glass="all"] .page{margin:60px 8px 16px;padding:20px 16px 28px}
}
/* Rail: the glass pane shrinks with it */
:root[data-glass="all"] body.rail #side{border-radius:20px}