/* Tasker 1.3 "Liquid Glass" layer (iOS 26 style), shared by every screen. Visual and motion only: copy, flows and
   layout stay as approved. This is a web approximation of Apple's material (backdrop blur + saturation, tint,
   specular edge), not an Apple asset. Every class here starts with lg-.
   Modes (html classes, set by js/glass.js): lg = glass on; lg-full = blur glass; lg-lite = solid frosted tints, no
   backdrop-filter (low-end phones, reduce transparency); lg-motion = springs, morphs and bubble on; lg-rm = reduced motion. */

#app{--lg-tint:rgba(255,255,255,.56);--lg-tint2:rgba(250,248,253,.74);--lg-sheet:rgba(247,245,250,.88);
  --lg-blur:blur(20px) saturate(190%) brightness(1.05);--lg-blur-s:blur(12px) saturate(180%) brightness(1.04);--lg-blur-l:blur(32px) saturate(170%) brightness(1.05);
  --lg-shadow:0 14px 34px -14px rgba(36,16,59,.42),0 3px 10px -4px rgba(36,16,59,.12);
  --lg-ptint:linear-gradient(180deg,rgba(150,78,218,.97) 0%,rgba(111,36,172,.97) 52%,rgba(92,25,148,.98) 100%);
  --lg-spring:cubic-bezier(.2,1.25,.3,1);--lg-spring-soft:cubic-bezier(.2,.9,.25,1)}
html.lg-lite #app{--lg-tint:rgba(251,250,253,.97);--lg-tint2:rgba(250,249,252,.98);--lg-sheet:#F6F5F9;--lg-blur:none;--lg-blur-s:none;--lg-blur-l:none}

/* ---------- the specular edge: a 1px ring, bright top-left, soft glint bottom-right ---------- */
html.lg :is(.fbar,.sheet,.ib,.logo,.sendb,.toast,.lg-ghost,.headsup,.lg-btnp,.cf)::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(var(--lg-ang,140deg),rgba(255,255,255,var(--lg-e1,.95)) 0%,rgba(255,255,255,calc(var(--lg-e1,.95) * .35)) 22%,rgba(255,255,255,0) 44%,rgba(255,255,255,0) 64%,rgba(255,255,255,var(--lg-e2,.5)) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.lg :is(.logo,.sendb,.toast,.headsup,.lg-btnp,.ib.glass,.screen.dark .ib){--lg-e1:.62;--lg-e2:.28}
html.lg .logo,html.lg .sendb,html.lg .cf,html.lg .chip{position:relative}

/* ---------- tab bar: glass capsule, sliding selected bubble, outline icons that fill when selected ---------- */
.fbar>:nth-child(1){grid-column:1}.fbar>:nth-child(2){grid-column:2}.fbar>:nth-child(3){grid-column:3}.fbar>:nth-child(4){grid-column:4}.fbar>:nth-child(5){grid-column:5}
.fbar>*{grid-row:1}
.fi .tic{display:grid;place-items:center}.fi .tic i{grid-area:1/1}
.fi .lg-o,.lg-bubble{display:none}
html.lg .fbar{background:var(--lg-tint);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:0;
  box-shadow:var(--lg-shadow),inset 0 1px 1px rgba(255,255,255,.75),inset 0 -10px 18px -12px rgba(107,33,168,.16);
  transform-origin:50% 100%;transition:transform .55s var(--lg-spring)}
html.lg .fbar.lg-compact{transform:translateY(5px) scale(.9)}
html.lg .fi{background:transparent!important;z-index:1;color:#241B30}
html.lg .fi.on{color:var(--p)}
html.lg .fi .lg-o{display:block}
html.lg .fi .lg-f,html.lg .fi .lg-o{transition:opacity .22s,transform .45s var(--lg-spring)}
html.lg .fi:not(.on) .lg-f{opacity:0;transform:scale(.55)}
html.lg .fi.on .lg-o{opacity:0;transform:scale(1.25)}
html.lg .lg-bubble{display:block;grid-column:var(--lg-col);position:relative;z-index:0;height:60px;border-radius:30px;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),rgba(118,100,146,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 -2px 6px rgba(107,33,168,.08);will-change:transform}
html.lg .fi .badge{z-index:3}
/* the logo item stays a flat tile inside the bar, level with the tabs: purple glass, never lifted */
html.lg .logo{background:var(--lg-ptint);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 4px rgba(36,16,59,.25),0 6px 14px -7px rgba(107,33,168,.75)}

/* ---------- top bars: glass when content scrolls under (sticky, static) ---------- */
html.lg .screen.scrolled .appbar,html.lg .appbar.solid{background:var(--lg-tint2);-webkit-backdrop-filter:var(--lg-blur-l);backdrop-filter:var(--lg-blur-l);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.75),0 1px 0 rgba(36,16,59,.06),0 10px 24px -18px rgba(36,16,59,.45)}
html.lg .screen.white.scrolled .appbar,html.lg .screen.white .appbar.solid{background:rgba(255,255,255,.76)}
html.lg-lite .screen.white.scrolled .appbar,html.lg-lite .screen.white .appbar.solid{background:rgba(255,255,255,.98)}
html.lg .screen.dark.scrolled .appbar{background:rgba(26,8,48,.72);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12),0 10px 24px -16px rgba(0,0,0,.6)}
html.lg .aria-screen.scrolled .appbar,html.lg .axhome-s.scrolled .appbar{background:rgba(36,16,59,.78);-webkit-backdrop-filter:var(--lg-blur-l);backdrop-filter:var(--lg-blur-l);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14),0 10px 26px -14px rgba(23,15,34,.65)}
html.lg-lite .screen.dark.scrolled .appbar,html.lg-lite .aria-screen.scrolled .appbar,html.lg-lite .axhome-s.scrolled .appbar{background:rgba(36,16,59,.98)}

/* round header buttons and floating buttons: glass bubbles */
html.lg .ib{background:rgba(255,255,255,.62);border-color:transparent;-webkit-backdrop-filter:var(--lg-blur-s);backdrop-filter:var(--lg-blur-s);
  box-shadow:0 6px 16px -10px rgba(36,16,59,.45),inset 0 1px 1px rgba(255,255,255,.8)}
html.lg-lite .ib{background:#fff}
html.lg .ib.ghost{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.lg .ib.ghost::before{display:none}
html.lg .ib.mic{background:rgba(236,222,250,.72);color:var(--p)}
html.lg-lite .ib.mic{background:var(--p50)}
html.lg .ib.glass,html.lg .screen.dark .ib{background:rgba(255,255,255,.16);color:#fff;box-shadow:0 6px 16px -10px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.28)}
html.lg-lite .ib.glass,html.lg-lite .screen.dark .ib{background:rgba(255,255,255,.2)}

/* ---------- buttons: purple glass on primary actions ---------- */
html.lg .btn.lg-btnp,html.lg .btn:not(.ghost):not(.soft):not(.danger):not(.ok):not(.dark){background:var(--lg-ptint);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.42),inset 0 -2px 6px rgba(36,16,59,.28),0 12px 24px -12px rgba(107,33,168,.75)}
html.lg .btn.sm:not(.ghost):not(.soft):not(.danger):not(.ok):not(.dark),html.lg .btn.xs:not(.ghost):not(.soft):not(.danger):not(.ok):not(.dark){box-shadow:inset 0 1px 1px rgba(255,255,255,.42),inset 0 -2px 5px rgba(36,16,59,.25)}
html.lg .btn.ghost{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9);box-shadow:0 6px 16px -12px rgba(36,16,59,.4),inset 0 1px 1px #fff,inset 0 0 0 1px rgba(36,16,59,.07)}
html.lg-lite .btn.ghost{background:#fff;border-color:var(--line)}
html.lg .btn.ok{box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,40,20,.25),0 12px 24px -12px rgba(14,138,92,.7)}
html.lg .chip:not(.on):not(.sel){box-shadow:inset 0 1px 0 #fff,0 2px 6px -4px rgba(36,16,59,.25)}
html.lg .chip.sel{background:var(--lg-ptint);box-shadow:inset 0 1px 1px rgba(255,255,255,.4)}
html.lg .seg .thumb{box-shadow:0 3px 8px -2px rgba(36,16,59,.16),inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(36,16,59,.06)}
html.lg-motion .seg .thumb{transition:left .5s var(--lg-spring),width .5s var(--lg-spring)}
html.lg-motion .toggle:after{transition:transform .45s var(--lg-spring)}
html.lg .toggle:after{box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 -1px 2px rgba(36,16,59,.08)}

/* ---------- composers (chat, Aria): glass bar, glass field, purple glass send ---------- */
html.lg .composer{background:var(--lg-tint);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-top:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(36,16,59,.07),0 -12px 30px -22px rgba(36,16,59,.5)}
html.lg .cf{background:rgba(255,255,255,.66);box-shadow:inset 0 1px 2px rgba(36,16,59,.07),0 1px 0 rgba(255,255,255,.9)}
html.lg-lite .cf{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
html.lg .cf input::placeholder{color:#6B6478}
/* small green status text in glass headers (chat: Online / Hired) one step darker so it stays AA on the glass */
html.lg .appbar .t small{--ok:#0B7550}
html.lg .sendb{background:var(--lg-ptint);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 5px rgba(36,16,59,.3),0 8px 16px -8px rgba(107,33,168,.7)}

/* ---------- sheets and menus: floating glass, inset from the edges ---------- */
html.lg .layer .dim{background:rgba(23,15,34,.34)}
html.lg .sheet{left:8px;right:8px;bottom:8px;border-radius:34px;background:var(--lg-sheet);-webkit-backdrop-filter:var(--lg-blur-l);backdrop-filter:var(--lg-blur-l);
  box-shadow:0 24px 60px -20px rgba(23,15,34,.55),inset 0 1px 1px rgba(255,255,255,.85);padding:8px 12px calc(var(--sab) + 12px);max-height:calc(92% - 8px)}
/* the sheet floats 8px in from each edge; 12px side padding keeps the content exactly as wide as before (350px on a 390 phone) */
html.lg .sheet.white{background:rgba(255,255,255,.9)}
html.lg-lite .sheet.white{background:#fff}
html.lg .handle{background:rgba(36,16,59,.18)}
html.lg-motion .sheet{transition:transform .6s var(--lg-spring-soft)}
html.lg .layer.lg-morph .sheet{transform:none;transition:none}
html.lg .lg-ghost{position:absolute;z-index:1;pointer-events:none;background:var(--lg-sheet);box-shadow:0 24px 60px -20px rgba(23,15,34,.5);will-change:transform}
html.lg .layer>.sheet{z-index:2}

/* toast + heads-up: dark glass */
html.lg .toast{background:rgba(36,16,59,.8);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-radius:18px;
  box-shadow:0 14px 30px -12px rgba(23,15,34,.55),inset 0 1px 1px rgba(255,255,255,.2)}
html.lg-lite .toast{background:var(--deep)}
html.lg-motion .toast{transition:transform .55s var(--lg-spring)}
html.lg-motion .headsup{transition:transform .6s var(--lg-spring)}

/* ---------- press feedback: the finger glow (inserted on press, removed on release) ---------- */
.lg-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;overflow:hidden;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,var(--ga,.55)) 0,rgba(255,255,255,calc(var(--ga,.55) * .35)) 26%,rgba(255,255,255,0) 62%);mix-blend-mode:soft-light}
.lg-glow.lt{mix-blend-mode:normal;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(107,33,168,.13) 0,rgba(107,33,168,.05) 30%,rgba(107,33,168,0) 64%)}
/* JS springs replace the CSS :active scale while motion is on (no double squish) */
html.lg-motion :is(.btn,.ib,.fi,.logo,.chip,.sendb,.tap,.li,.vmic,.axmic):active{transform:none}

/* ---------- reduced motion: no springs, quick fades ---------- */
html.lg-rm .fbar,html.lg-rm .fi .lg-f,html.lg-rm .fi .lg-o{transition:none}
html.lg-rm .fbar.lg-compact{transform:none}

/* ---------- screen recordings (?rec=1): phone chrome like the shots, animations on ---------- */
html.lg-rec #app{--sat:54px;--sab:30px}
html.lg-rec .sb{display:flex;height:54px;padding-top:8px}
html.lg-rec .island,html.lg-rec .homeind{display:block}
html.lg-rec .fbar{bottom:calc(var(--sab) + 2px)}
html.lg-rec .ctabar,html.lg-rec .composer{padding-bottom:calc(var(--sab) + 6px)}
html.lg-rec .wf,html.lg-rec .dhandle{display:none!important}
.lg-finger{position:fixed;z-index:999;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;background:rgba(36,16,59,.22);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 14px rgba(36,16,59,.35);opacity:0;transition:opacity .15s,transform .15s;transform:scale(.7)}
.lg-finger.on{opacity:1;transform:scale(1)}

/* ---------- demo start screen: glass mode picker + What's new card (demo only) ---------- */
.lg-new{margin-top:16px;border-radius:22px;padding:14px;display:flex;gap:12px;align-items:center;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(90% 120% at 15% 0%,#9A55DC 0%,#6B21A8 48%,#2B1046 100%)}
.lg-new .lg-ni{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:24px;flex:none;background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 6px 14px -6px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lg-new b{display:block;font-size:15px}.lg-new small{display:block;color:#E3D2F5;font-size:12px;line-height:1.4;margin-top:2px}
.lg-new>i{color:#E3D2F5;font-size:16px}
.lg-modes{margin-top:8px}
.lg-auto{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
/* edge-to-edge scrollers inside a floating sheet bleed to the sheet's 12px padding, not the old 20px */
html.lg .sheet .chips.scroll,html.lg .sheet .axskrow{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
html.lg .sheet{overflow-x:hidden}