/* theme-glassy.css (2026-10-16, Joseph: "glassy white" redesign, from /workspace/mockups/glassy).
   Loaded LAST (after theme-modern.css) on the shell (index.html) and on /privacy + /terms. Restyle only: no markup, text or feature changes.
   Near-white page with soft pastel blurs; frosted-glass cards (semi-transparent white + backdrop blur, 1px white edge, 22px corners, soft shadow);
   black Inter text; black primary + white secondary buttons; selected tab white with a tick.
   Everything is scoped html.tm:not(.a11y) so "Easy to see" (high contrast) still wins. Glass turns SOLID (opaque white, no blur, grey edge) for:
   large text (html.bigtext), low data (html.lowdata), prefers-reduced-transparency, and browsers without backdrop-filter.
   999 rule unchanged: exactly ONE tappable 999, bottom right, red (position/size rules stay in theme-modern.css; only its look changes here).
   NB: never put backdrop-filter/filter/transform on an ancestor of a position:fixed 999 (#lgate .lg-999row, .el-set) – it would move the 999. */
:root{--tg-bg:#F7F8FB;--tg-ink:#0B0B0C;--tg-ink2:#3D4148;--tg-ink3:#4F5562;
 --tg-glass:rgba(255,255,255,.62);--tg-glass2:rgba(255,255,255,.78);--tg-glass3:rgba(255,255,255,.88);
 --tg-blur:blur(20px) saturate(160%);--tg-edge:rgba(255,255,255,.95);--tg-line:rgba(11,11,12,.09);
 --tg-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px rgba(20,30,60,.08),0 2px 6px rgba(20,30,60,.04);
 --tg-shadow-sm:0 1px 0 rgba(255,255,255,.9) inset,0 2px 8px rgba(20,30,60,.06);--tg-r:22px;--tg-r2:16px;--tg-r3:14px}
/* solid fallbacks */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--tg-glass:#fff;--tg-glass2:#fff;--tg-glass3:#fff;--tg-blur:none;--tg-edge:#E4E7EC}}
@media (prefers-reduced-transparency:reduce){:root{--tg-glass:#fff;--tg-glass2:#fff;--tg-glass3:#fff;--tg-blur:none;--tg-edge:#E4E7EC}}
html.bigtext,html.lowdata{--tg-glass:#fff;--tg-glass2:#fff;--tg-glass3:#fff;--tg-blur:none;--tg-edge:#D0D5DD}
html.tm{--tm-ink:var(--tg-ink);--tm-ink2:var(--tg-ink2);--tm-ink3:var(--tg-ink3)}

/* ---------- Page background: near-white + soft pastel blurs (fixed, never scrolls sideways) ---------- */
html.tm:not(.a11y){background:var(--tg-bg)}
html.tm:not(.a11y) body,html.tm:not(.a11y) .lgl-body{background:
 radial-gradient(55vmax 55vmax at -8% -6%,rgba(185,230,207,.6),transparent 62%),
 radial-gradient(50vmax 50vmax at 108% 34%,rgba(201,216,255,.6),transparent 62%),
 radial-gradient(48vmax 48vmax at -6% 82%,rgba(255,226,194,.55),transparent 62%),
 radial-gradient(55vmax 55vmax at 106% 106%,rgba(230,214,255,.55),transparent 62%),var(--tg-bg) fixed!important;color:var(--tg-ink)}
html.lowdata.tm:not(.a11y) body,html.lowdata.tm:not(.a11y) .lgl-body{background:var(--tg-bg)!important}
html.tm:not(.a11y) #lgate{background:
 radial-gradient(420px 420px at -6% -4%,rgba(185,230,207,.5),transparent 70%),
 radial-gradient(380px 380px at 106% 40%,rgba(201,216,255,.5),transparent 70%),var(--tg-bg)!important;color:var(--tg-ink)!important}

/* ---------- Top bar (brand, Reset, Accessibility, language, Log out) ---------- */
html.tm:not(.a11y) body>header{background:var(--tg-glass2)!important;-webkit-backdrop-filter:var(--tg-blur);backdrop-filter:var(--tg-blur);border-bottom:1px solid var(--tg-edge)!important;box-shadow:0 6px 24px rgba(20,30,60,.06)!important;color:var(--tg-ink)!important}
html.tm:not(.a11y) body>header #home.el-brand{color:var(--tg-ink)!important}
html.tm body>header .el-resetbtn,html.tm body>header .el-gear,html.tm body>header #lang,html.tm body>header .el-logout{border-radius:var(--tg-r3)!important}
html.tm:not(.a11y) body>header .el-resetbtn,html.tm:not(.a11y) body>header .el-gear,html.tm:not(.a11y) body>header #lang{background:rgba(255,255,255,.82)!important;border:1px solid var(--tg-line)!important;color:var(--tg-ink)!important;box-shadow:var(--tg-shadow-sm)!important}
html.tm:not(.a11y) body>header .el-resetbtn:hover,html.tm:not(.a11y) body>header .el-gear:hover,html.tm:not(.a11y) body>header #lang:hover{background:#fff!important}
html.tm:not(.a11y) body>header .el-logout{background:rgba(254,243,242,.9)!important;border:1px solid #FECDCA!important;box-shadow:var(--tg-shadow-sm)!important}
html.tm:not(.a11y) body>header .el-resetbtn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}
html.tm:not(.a11y) body>header .el-gear::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='5'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3Cpath d='M19 17a3 3 0 0 0-3-3h-3.4'/%3E%3Cpath d='M3 3h1a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M6 8h11'/%3E%3Cpath d='M15 8v6'/%3E%3C/svg%3E")}
html.tm:not(.a11y) body>header #lang::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E")}
html.tm:not(.a11y) #preview{background:rgba(255,248,225,.85)!important;border-bottom:1px solid rgba(245,227,163,.9)}
html.tm:not(.a11y) #autolang{background:var(--tg-glass2);border-bottom:1px solid var(--tg-edge)}
html.tm:not(.a11y) #autolang button{border-radius:var(--tg-r3);border:1px solid var(--tg-line)}

/* ---------- Glass cards (shell) ---------- */
html.tm:not(.a11y) #app .card,html.tm:not(.a11y) #app .hhelp,html.tm:not(.a11y) .ck-ban,html.tm:not(.a11y) #app .big.big,html.tm:not(.a11y) .en-strip .en-in,html.tm:not(.a11y) .bk-tile{
 background:var(--tg-glass2)!important;-webkit-backdrop-filter:var(--tg-blur);backdrop-filter:var(--tg-blur);border:1px solid var(--tg-edge)!important;box-shadow:var(--tg-shadow)!important;color:var(--tg-ink)!important}
html.tm #app .card,html.tm #app .hhelp,html.tm .ck-ban,html.tm .en-strip .en-in{border-radius:var(--tg-r)!important}
html.tm #app .big:not(.row),html.tm #app .big.row{border-radius:var(--tg-r)!important}
html.tm:not(.a11y) #app .big.big:hover{background:var(--tg-glass3)!important;border-color:#fff!important}
html.tm:not(.a11y) #app .big.big:focus-visible{outline:3px solid #2E90FA;outline-offset:2px}
html.tm:not(.a11y) #app .big>b,html.tm:not(.a11y) #app .big.row>b{background:rgba(255,255,255,.92)!important;color:var(--tg-ink)!important;border:1px solid var(--tg-line);box-shadow:0 2px 6px rgba(20,30,60,.05);border-radius:var(--tg-r3)!important}
html.tm:not(.a11y) #app iframe{border:1px solid var(--tg-edge)!important;border-radius:var(--tg-r)!important;background:var(--tg-glass3)!important;box-shadow:var(--tg-shadow)}
html.tm:not(.a11y) #app .opt{background:rgba(255,255,255,.9);border-color:var(--tg-line)}
html.tm:not(.a11y) #app .tag{background:rgba(255,255,255,.85);border:1px solid var(--tg-line);color:var(--tg-ink2)}
html.tm .tm-sh{color:var(--tg-ink3)!important}
html.tm:not(.a11y) #app h2,html.tm:not(.a11y) .tm-hello{color:var(--tg-ink)}

/* search */
html.tm .vs-w .vs-form input{border-radius:var(--tg-r2)!important}
html.tm:not(.a11y) .vs-w .vs-form input{background-color:var(--tg-glass3)!important;border:1px solid var(--tg-edge)!important;box-shadow:var(--tg-shadow)!important;color:var(--tg-ink)!important}
html.tm:not(.a11y) .vs-w .vs-form input::placeholder{color:#5A5F68}
html.tm:not(.a11y) .vs-panel.vs-drop{background:rgba(255,255,255,.96);border:1px solid var(--tg-edge);border-radius:var(--tg-r2);box-shadow:0 20px 50px rgba(20,30,60,.18)}
html.tm:not(.a11y) #app #lq{background:var(--tg-glass3)!important;border:1px solid var(--tg-edge)!important;box-shadow:var(--tg-shadow-sm);border-radius:var(--tg-r3)!important}

/* emergency numbers card: 999 row stays red (text only), helpline rows on glass with white phone chips */
html.tm:not(.a11y) .hhelp .hh999{background:rgba(253,236,234,.82);color:#8A1C16;border-bottom:1px solid rgba(255,255,255,.9)}
html.tm .hhelp .hh999::before{border-radius:12px;background-color:#C4231C;box-shadow:0 4px 10px rgba(196,35,28,.25)}
html.tm:not(.a11y) .hhelp a{border-top:1px solid rgba(11,11,12,.06)!important;color:var(--tg-ink2)}
html.tm:not(.a11y) .hhelp a b{color:var(--tg-ink)}
html.tm:not(.a11y) .hhelp a::after{border-radius:12px;background:rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center/18px;border:1px solid var(--tg-line);box-shadow:0 2px 6px rgba(20,30,60,.05)}

/* ---------- Cookie banner: glass card, Accept = black primary, the other = white secondary ---------- */
html.tm:not(.a11y) .ck-ban{color:var(--tg-ink2)!important}
html.tm:not(.a11y) .ck-ban b{color:var(--tg-ink)!important}
html.tm .ck-ban .ck-b{border-radius:var(--tg-r3)!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) .ck-ban .ck-b{background:#fff!important;color:#111!important;border:1px solid rgba(11,11,12,.16)!important;box-shadow:0 2px 8px rgba(20,30,60,.05)!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) .ck-ban .ck-b[data-v=all]{background:var(--tg-ink)!important;color:#fff!important;border-color:var(--tg-ink)!important;box-shadow:0 6px 16px rgba(0,0,0,.18)!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) .ck-ban .ck-b[data-v=all] *{color:#fff!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) .ck-ban .ck-b[data-v=all]::before{color:#fff!important}
html.tm:not(.a11y) .ck-ban .ck-more{color:var(--tg-ink)!important;font-weight:600;text-decoration:underline}
html.tm:not(.a11y) .lg-legal a,html.tm:not(.a11y) .lg-legal button{color:var(--tg-ink2)!important}
html.tm .lg-legal{color:var(--tg-ink3)!important}

/* ---------- Bottom: glass safety strip + glass tab bar; selected tab = white pill with a tick ---------- */
/* blur sits on #tabs::before (not on #tabs) so the strip above it can blur the page too (nested backdrop roots don't blur) */
html.tm:not(.a11y) #tabs{background:transparent!important;border-top:0!important}
html.tm:not(.a11y) #tabs::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tg-glass2);-webkit-backdrop-filter:var(--tg-blur);backdrop-filter:var(--tg-blur);border-top:1px solid var(--tg-edge);box-shadow:0 -6px 24px rgba(20,30,60,.06);pointer-events:none}
html.tm:not(.a11y) body #tabs>.tab999{background:var(--tg-glass2)!important;-webkit-backdrop-filter:var(--tg-blur);backdrop-filter:var(--tg-blur);border-top:1px solid var(--tg-edge)!important}
html.tm:not(.a11y) #tabs>a{color:var(--tg-ink3)!important}
html.tm #tabs>a{border-radius:var(--tg-r3)}
html.tm:not(.a11y) #tabs>a.on{color:var(--tg-ink)!important;font-weight:700!important;background:#fff!important;box-shadow:0 2px 10px rgba(20,30,60,.10)!important;outline:1px solid rgba(11,11,12,.07);outline-offset:-1px}
html.tm:not(.a11y) #tabs>a.on::before{content:none!important}
html.tm:not(.a11y) #tabs>a.on::after{content:"";position:absolute;top:7px;left:calc(50% + 7px);width:14px;height:14px;border-radius:50%;background:var(--tg-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/9px;pointer-events:none}
html.tm:not(.a11y) body #tabs>.tab999 a.rpar{background:rgba(255,247,230,.92)!important;border:1px solid #F5C26B!important;color:#6B4100!important;box-shadow:0 2px 8px rgba(247,144,9,.12)!important;border-radius:var(--tg-r3)!important}
html.tm:not(.a11y) .tab999 .ckin,html.tm:not(.a11y) .lg-999row .ckin{background:#fff!important;border:1px solid rgba(11,11,12,.16)!important;border-radius:var(--tg-r3)!important;box-shadow:0 2px 8px rgba(20,30,60,.06)!important}

/* ---------- The ONE 999 button: red, glossy, white edge (place and size unchanged) ---------- */
html.tm:not(.a11y) body #tabs>.tab999 .r999,html.tm:not(.a11y) #lgate .lg-999row .r999,html.tm:not(.a11y) .lgl-999 .r999{background:linear-gradient(180deg,#DC2626 0%,#B91C1C 100%)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.85)!important;border-radius:var(--tg-r3)!important;
 box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 3px rgba(220,38,38,.14),0 8px 20px rgba(185,28,28,.35)!important;text-shadow:0 1px 1px rgba(0,0,0,.2)}
html.tm:not(.a11y) body #tabs>.tab999 .r999:active,html.tm:not(.a11y) #lgate .lg-999row .r999:active,html.tm:not(.a11y) .lgl-999 .r999:active{background:#991B1B!important}

/* ---------- Primary (black) buttons ---------- */
html.tm:not(.a11y):not(#tgx):not(#tgx) #lgate .lg-go{background:var(--tg-ink)!important;color:#fff!important;border:1px solid var(--tg-ink)!important;box-shadow:0 6px 16px rgba(0,0,0,.18)!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) #lgate .lg-go *{color:#fff!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) #lgate .lg-go svg{stroke:#fff!important}
html.tm:not(.a11y) #lgate .lg-sw{border-color:rgba(11,11,12,.16)!important;color:var(--tg-ink)!important}

/* ---------- Login screen ---------- */
html.tm:not(.a11y) #lgate .lg-help{background:var(--tg-glass3);border:1px solid var(--tg-edge);box-shadow:var(--tg-shadow);border-radius:var(--tg-r)}
html.tm:not(.a11y) #lgate .el-gatebar{background:var(--tg-glass3)!important;border-bottom:1px solid var(--tg-edge)!important}
html.tm:not(.a11y) #lgate .el-gatebar button{border:1px solid var(--tg-line)!important;color:var(--tg-ink)!important;border-radius:var(--tg-r3)!important;box-shadow:var(--tg-shadow-sm)}
html.tm:not(.a11y) .lg-lang-big{background:var(--tg-glass3)!important;border:1px solid var(--tg-edge)!important;box-shadow:var(--tg-shadow-sm)}
html.tm:not(.a11y) #lgate input[type=email],html.tm:not(.a11y) #lgate input[type=password],html.tm:not(.a11y) #lgate input[type=text]{border-radius:var(--tg-r3)!important}
html.tm:not(.a11y) #lgate::after{background:var(--tg-glass3);border-top:1px solid var(--tg-edge)}

/* ---------- Sheets and the 999 check screen (no blur on these: they may hold a fixed 999) ---------- */
html.tm:not(.a11y) .el-set{background:rgba(255,255,255,.98)!important;border-radius:var(--tg-r) var(--tg-r) 0 0;box-shadow:0 -12px 40px rgba(20,30,60,.16)}
html.tm #g999>div{border-radius:var(--tg-r)!important}
html.tm:not(.a11y) .af-msg{border-radius:var(--tg-r2)}

/* ---------- /privacy + /terms ---------- */
html.tm:not(.a11y) .lgl-top{background:var(--tg-glass2)!important;-webkit-backdrop-filter:var(--tg-blur);backdrop-filter:var(--tg-blur);border-bottom:1px solid var(--tg-edge)!important;box-shadow:0 6px 24px rgba(20,30,60,.06)}
html.tm:not(.a11y) .lgl-top a{color:var(--tg-ink)!important}
html.tm:not(.a11y) .lgl .card{background:var(--tg-glass2)!important;-webkit-backdrop-filter:var(--tg-blur);backdrop-filter:var(--tg-blur);border:1px solid var(--tg-edge)!important;border-radius:var(--tg-r)!important;box-shadow:var(--tg-shadow)!important}
html.tm:not(.a11y) .lgl h1,html.tm:not(.a11y) .lgl h2,html.tm:not(.a11y) .lgl h3{color:var(--tg-ink)}
html.tm:not(.a11y) .lgl a{color:var(--tg-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
html.tm:not(.a11y) .lgl .lgl-date,html.tm:not(.a11y) .lgl .lgl-tr{color:var(--tg-ink3)}
html.tm:not(.a11y) .lgl table{background:rgba(255,255,255,.9)}
html.tm:not(.a11y) .lgl th,html.tm:not(.a11y) .lgl td{border-color:rgba(11,11,12,.12)}

/* ---------- Brand (2026-10-16, Joseph: match the pamphlet): house-and-leaf logo + "EasyLife UK" (i18n key "app") + English slogan
   "Less Hassle, More Living" underneath in small italic dark gold (#6E5212: AA on white/glass). Same markup on /privacy + /terms (.lgl-brand).
   Shrinks at narrow widths so it never wraps or pushes Reset / Accessibility / language / Log out. ---------- */
.el-logo{flex:none;width:34px;height:34px;display:block}
.el-brand-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.el-slogan{display:block;font-style:italic;font-weight:600;font-size:12px;line-height:1.15;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate;text-align:start}
html.tm body>header #home.el-brand{gap:9px;align-items:center}
html.tm body>header #home.el-brand .el-brand-name{flex:none!important;font-size:20px!important;line-height:1.1!important;font-weight:800;letter-spacing:-.025em}
html.tm:not(.a11y) .el-slogan{color:#6E5212}
html.tm.a11y .el-slogan{color:inherit}
html.tm.a11y .el-logo{background:#fff;border-radius:8px;padding:2px}
html.tm body>header #home.el-brand:focus:not(:focus-visible){outline:none}
@media(max-width:420px){.el-logo{width:30px;height:30px}html.tm body>header #home.el-brand{gap:7px}html.tm body>header #home.el-brand .el-brand-name{font-size:17px!important}.el-slogan{font-size:10.5px}}
@media(max-width:360px){.el-logo{width:26px;height:26px}html.tm body>header #home.el-brand{gap:5px}html.tm body>header #home.el-brand .el-brand-name{font-size:15px!important}.el-slogan{font-size:9.5px;letter-spacing:0}}
@media(max-width:330px){.el-logo{display:none}}
html.tm.bigtext body>header #home.el-brand .el-brand-name{font-size:17px!important}html.tm.bigtext .el-slogan{font-size:11px}
/* legal pages header */
.lgl-top .lgl-brand{flex:1;display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none}
.lgl-top .lgl-back{font-size:20px;font-weight:700;line-height:1}
.lgl-top .lgl-brand .el-brand-name{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
html.tm:not(.a11y) .lgl-top .lgl-brand,html.tm:not(.a11y) .lgl-top .lgl-brand .el-brand-name{color:var(--tg-ink)!important}
/* slogan scales with the space left beside the header buttons (container query; the media rules above are the fallback) */
@supports (container-type:inline-size){.el-brand-txt{container-type:inline-size}.el-slogan{font-size:clamp(8.5px,7.7cqi,12.5px)!important;text-overflow:clip}}
html.tm body>header{padding-inline:10px}