/* theme-modern.css (2026-10-15, Joseph approved the modern redesign).
   Loaded LAST on the shell (index.html) and on /privacy + /terms; html.tm is set in index.html's first inline script.
   Colours/borders are scoped to html.tm:not(.a11y) so "Easy to see" (html.a11y, black/yellow high contrast) keeps winning.
   Rules: exactly ONE tappable 999, at bottom right (safety strip above the tab bar, physical right also in RTL). */
@font-face{font-family:"Inter";src:url("/shared/fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--tm-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Vazirmatn","Noto Naskh Arabic","Noto Sans Arabic",sans-serif;
 --tm-bg:#F6F7F9;--tm-surface:#fff;--tm-line:#E4E7EC;--tm-line2:#D0D5DD;--tm-ink:#101828;--tm-ink2:#475467;--tm-ink3:#667085;
 --tm-brand:#0F6E68;--tm-brand-soft:#E6F2F1;--tm-danger:#C4231C;--tm-danger-soft:#FDECEA;
 --tm-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);--tm-strip:64px;--tm-nav:64px}
html.tm body,html.tm button,html.tm input,html.tm select,html.tm textarea,html.tm #lgate,html.tm .el-set,html.tm .af-msg{font-family:var(--tm-font)!important}
html.tm:not(.a11y) body{background:var(--tm-bg);color:var(--tm-ink);-webkit-font-smoothing:antialiased}
html.tm body{font-size:17px}

/* ---------- Header: white, words "Simply UK" only (no house icon), outlined icon buttons ---------- */
html.tm:not(.a11y) body>header{background:rgba(255,255,255,.96)!important;color:var(--tm-ink)!important;border-bottom:1px solid var(--tm-line);box-shadow:none;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
html.tm body>header{padding:10px 14px;z-index:60;min-height:64px}
html.tm body>header #home.el-brand .el-brand-name{font-size:21px!important;font-weight:750;letter-spacing:-.025em;line-height:1.2}
html.tm:not(.a11y) body>header #home.el-brand{color:var(--tm-ink)!important}
html.tm{--el-hb:44px}
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:12px!important;border-width:1px!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:#fff!important;border-color:var(--tm-line)!important;color:#344054!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:#F2F4F7!important}
html.tm:not(.a11y) body>header .el-logout{background:#FEF3F2!important;border-color:#FECDCA!important;color:#B42318!important}
html.tm body>header .el-resetbtn:focus-visible,html.tm body>header .el-gear:focus-visible,html.tm body>header #lang:focus-visible,html.tm body>header .el-logout:focus-visible{outline:3px solid #2E90FA!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='%23344054' 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='%23344054' 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='%23344054' 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.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='%23fff' stroke-width='2.2' 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) #preview{background:#FFF8E1;color:#7A5B00;border-bottom:1px solid #F5E3A3;font-size:12.5px;padding:5px 12px}
html.tm:not(.a11y) #autolang{background:#fff;border-bottom:1px solid var(--tm-line);color:var(--tm-ink2);font-size:14px}
html.tm:not(.a11y) #autolang button{border:1px solid var(--tm-line2);border-radius:12px;background:#fff;color:var(--tm-ink);font-weight:600}

/* ---------- Page content ---------- */
html.tm main#app{padding:16px 16px 8px;max-width:640px}
html.tm #app{padding-bottom:calc(var(--tm-strip) + var(--tm-nav) + 28px + env(safe-area-inset-bottom))!important}
html.tm #app h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:700}
html.tm .tm-hello{font-size:24px;line-height:1.2;letter-spacing:-.025em;font-weight:750;margin:2px 2px 12px}
html.tm .tm-sh{font-size:13px!important;text-transform:uppercase;letter-spacing:.08em!important;color:var(--tm-ink3);font-weight:600!important;margin:22px 2px 10px!important}
html.tm:not(.a11y) #app .card{background:#fff;border:1px solid var(--tm-line);border-radius:16px;box-shadow:var(--tm-shadow)}
html.tm:not(.a11y) #app .opt{border:1px solid var(--tm-line2);border-radius:12px;background:#fff;font-weight:600;color:var(--tm-ink)}
html.tm:not(.a11y) #app input:not([type=checkbox]):not([type=radio]),html.tm:not(.a11y) #app select,html.tm:not(.a11y) #app textarea{border:1px solid var(--tm-line2)!important;border-radius:12px!important;background:#fff;color:var(--tm-ink)}
html.tm #app input:not([type=checkbox]):not([type=radio]):focus-visible,html.tm #app select:focus-visible,html.tm #app textarea:focus-visible{outline:3px solid #84CAFF;outline-offset:0;border-color:#2E90FA!important}
html.tm:not(.a11y) #app iframe{border:1px solid var(--tm-line);border-radius:16px;background:#fff}
html.tm #app iframe#sec{height:calc(100vh - 230px)}
@supports(height:100dvh){html.tm #app iframe#sec{height:calc(100dvh - 230px)}}
html.tm:not(.a11y) #app .tag{background:#F2F4F7;color:var(--tm-ink2);border-radius:999px;padding:2px 8px;font-weight:600}

/* Search (home) */
html.tm .pcirc.pcirc{display:block;margin:0 0 14px}
html.tm .pcirc>.el-cw>a.rpar,html.tm .pcirc>.el-cw>.el-clbl,html.tm .pcirc>a.rpar,html.tm .pcirc>span{display:none!important}
html.tm .pcirc>.el-cw{display:block;max-width:none!important;margin:0 0 10px}
html.tm .pcirc>.el-cw:not(:has(.el-t999:not([hidden]))){display:none}
html.tm .vs-w{max-width:none!important;padding:0!important;width:100%}
html.tm .vs-w .vs-form{height:54px}
html.tm .vs-w .vs-form input{height:54px!important;min-height:54px;border-radius:16px!important;font:500 16px/1.2 var(--tm-font)!important;padding-inline-start:44px!important;padding-inline-end:56px!important;
 background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center/20px!important}
[dir=rtl] .tm .vs-w .vs-form input,html.tm[dir=rtl] .vs-w .vs-form input{background-position:calc(100% - 14px) center!important}
html.tm:not(.a11y) .vs-w .vs-form input{border:1px solid var(--tm-line2)!important;box-shadow:var(--tm-shadow);color:var(--tm-ink)!important}
html.tm .vs-w .vs-mic{top:6px!important;inset-inline-end:6px!important;width:42px!important;height:42px!important;border-radius:12px!important}
html.tm:not(.a11y) .vs-w .vs-mic{background:var(--tm-brand-soft)!important;color:var(--tm-brand)!important}
html.tm:not(.a11y) .vs-panel.vs-drop{border:1px solid var(--tm-line);border-radius:16px;box-shadow:0 12px 32px rgba(16,24,40,.18)}

/* Emergency + helplines card (999 here is text only; the tappable 999 is bottom right) */
html.tm .hhelp{padding:0;overflow:hidden;border-radius:16px;font-size:15.5px;margin:0 0 4px}
html.tm:not(.a11y) .hhelp{background:#fff;border:1px solid var(--tm-line);box-shadow:var(--tm-shadow)}
html.tm .hhelp .hh999{display:flex;align-items:center;gap:12px;margin:0;padding:10px 14px;font-size:15.5px;line-height:1.3}
html.tm:not(.a11y) .hhelp .hh999{background:var(--tm-danger-soft);color:#8A1C16}
html.tm .hhelp .hh999::before{content:"";flex:none;width:36px;height:36px;border-radius:10px;background:var(--tm-danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat center/19px}
html.tm .hhelp .hh999 strong{display:block;font-weight:700}html.tm .hhelp .hh999 small{display:block;font-size:13.5px;font-weight:500}
html.tm .hhelp a{display:flex!important;align-items:center;gap:12px;min-height:52px;padding:6px 14px!important;border-top:1px solid var(--tm-line)!important}
html.tm:not(.a11y) .hhelp a{color:var(--tm-ink2)}
html.tm .hhelp a b{flex:none;min-width:2.6em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tm-ink)}
html.tm .hhelp a .tm-w{flex:1;min-width:0}
html.tm .hhelp a::after{content:"";flex:none;width:36px;height:36px;border-radius:10px;background:var(--tm-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E68' 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}

/* ---------- Tiles (home grid + every menu) ---------- */
html.tm #app .grid{gap:12px}
html.tm #app .learn-grid{grid-template-columns:1fr 1fr}
html.tm #app .big:not(.row){aspect-ratio:auto!important;min-height:104px;margin:0;padding:14px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px;
 text-align:start!important;font-size:16px!important;font-weight:600!important;line-height:1.25!important;letter-spacing:-.01em;border-radius:16px!important;word-break:normal;overflow-wrap:anywhere;hyphens:manual}
html.tm:not(.a11y) #app .big.big{background:#fff!important;border:1px solid var(--tm-line)!important;box-shadow:var(--tm-shadow)!important;color:var(--tm-ink)!important}
html.tm:not(.a11y) #app .big.big:hover{border-color:var(--tm-line2)!important}
html.tm #app .big:active{transform:scale(.98)}
html.tm #app .big>b{display:grid!important;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;font-size:24px!important;line-height:1;margin:0}
html.tm:not(.a11y) #app .big>b{background:var(--tm-tint,#EEF2F6);color:var(--tm-tone,#344054)}
html.tm #app .big>b svg.tmi{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tm #app .big.tm-wide,html.tm #app .big.hg-acct{grid-column:1/-1;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;min-height:68px}
html.tm #app .big.row{min-height:64px;border-radius:16px!important;padding:10px 14px!important;font-size:17px!important;text-align:start}
html.tm #app .big.row>b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:22px}
html.tm:not(.a11y) #app .big.row>b{background:var(--tm-brand-soft);color:var(--tm-brand)}
.tm-t-red{--tm-tint:#FDECEA;--tm-tone:#B42318}.tm-t-blue{--tm-tint:#E8F1FD;--tm-tone:#175CD3}.tm-t-green{--tm-tint:#E7F5EE;--tm-tone:#067647}
.tm-t-pink{--tm-tint:#FCEAF3;--tm-tone:#C11574}.tm-t-amber{--tm-tint:#FEF4E2;--tm-tone:#B54708}.tm-t-violet{--tm-tint:#F1ECFD;--tm-tone:#6941C6}
.tm-t-teal{--tm-tint:#E6F2F1;--tm-tone:#0F6E68}.tm-t-slate{--tm-tint:#EEF2F6;--tm-tone:#344054}.tm-t-orange{--tm-tint:#FEEEE5;--tm-tone:#C4320A}
.tm-t-sky{--tm-tint:#E5F4FA;--tm-tone:#026AA2}.tm-t-indigo{--tm-tint:#EEF0FB;--tm-tone:#3538CD}

/* ---------- Bottom: safety strip (Alert family left, 999 right) + flat tab bar ---------- */
html.tm #tabs{height:auto;min-height:var(--tm-nav);box-shadow:none!important;z-index:50}
html.tm:not(.a11y) #tabs{background:#fff!important;border-top:1px solid var(--tm-line)}
html.tm #tabs>a{min-height:var(--tm-nav)!important;gap:3px!important;font-size:11.5px!important;font-weight:500!important;padding:6px 1px!important;position:relative;letter-spacing:-.01em}
html.tm:not(.a11y) #tabs>a{color:var(--tm-ink3)!important;background:none!important;box-shadow:none!important}
html.tm:not(.a11y) #tabs>a.on{color:var(--tm-brand)!important;font-weight:650!important}
html.tm:not(.a11y) #tabs>a.on::before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:var(--tm-brand)}
html.tm #tabs>a svg{width:24px!important;height:24px!important;fill:none!important;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.tm #tabs>a span{white-space:normal;overflow-wrap:normal;hyphens:manual;line-height:1.1;text-align:center;max-width:100%}
html.tm body #tabs>.tab999{position:absolute!important;left:0!important;right:0!important;bottom:100%!important;top:auto!important;width:auto!important;height:var(--tm-strip);
 display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:8px 12px!important;margin:0!important;direction:ltr;pointer-events:auto;z-index:51}
html.tm:not(.a11y) body #tabs>.tab999{background:#fff!important;border-top:1px solid var(--tm-line)}
html.tm.a11y body #tabs>.tab999{background:#000!important;border-top:3px solid #fff}
html.tm body #tabs>.tab999>.el-cwpar,html.tm body #tabs>.tab999>a.rpar{order:1!important;margin:0!important}
html.tm body #tabs>.tab999>.el-cw999,html.tm body #tabs>.tab999>.r999{order:2!important;margin:0 0 0 auto!important}
html.tm body #tabs>.tab999 .el-cw{display:flex!important;flex-direction:row!important;max-width:none!important;gap:0}
html.tm body #tabs>.tab999 .el-clbl,html.tm body #tabs .el-t999{display:none!important}
html.tm body #tabs>.tab999 a.rpar{width:auto!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:0 16px!important;margin:0!important;border-radius:12px!important;
 flex-direction:row!important;gap:8px!important;box-shadow:none!important;font:650 16px/1 var(--tm-font)!important;white-space:nowrap}
html.tm:not(.a11y) body #tabs>.tab999 a.rpar{background:#FFF7E6!important;border:1px solid #F5C26B!important;color:#7A4A00!important}
html.tm body #tabs>.tab999 a.rpar svg{width:22px!important;height:22px!important;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tm body #tabs .el-cw a.rpar span,html.tm body #tabs>.tab999 a.rpar span{display:inline!important;font:inherit!important;margin:0!important;unicode-bidi:plaintext}
html.tm body #tabs>.tab999 .r999{width:auto!important;min-width:124px!important;height:48px!important;min-height:48px!important;max-height:none!important;padding:0 18px!important;border-radius:12px!important;
 display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font:800 20px/1 var(--tm-font)!important;letter-spacing:.02em}
html.tm:not(.a11y) body #tabs>.tab999 .r999{background:var(--tm-danger)!important;color:#fff!important;border:0!important;box-shadow:0 2px 8px rgba(196,35,28,.35)!important}
html.tm .r999::before{content:"";width:18px;height:18px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' 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}
html.tm .r999:focus-visible,html.tm .rpar:focus-visible{outline:3px solid #2E90FA!important;outline-offset:2px!important}
html.tm .af-msg{bottom:calc(var(--tm-strip) + var(--tm-nav) + 12px + env(safe-area-inset-bottom))}
html.tm.a11y .el-reset,html.tm.bigtext .el-reset,html.tm.focusring .el-reset{bottom:calc(var(--tm-strip) + var(--tm-nav) + 10px + env(safe-area-inset-bottom))!important}
@media(max-width:360px){html.tm body #tabs>.tab999 a.rpar{padding:0 12px!important;font-size:15px!important}html.tm body #tabs>.tab999 .r999{min-width:108px!important}html.tm #tabs>a{font-size:10.5px!important}}
@media(max-height:500px) and (orientation:landscape){:root{--tm-strip:56px;--tm-nav:52px}html.tm #tabs>a{min-height:52px!important}html.tm body #tabs>.tab999 a.rpar,html.tm body #tabs>.tab999 .r999{height:44px!important;min-height:44px!important}}

/* ---------- Cookie banner, endorsements, legal line ---------- */
html.tm .ck-ban{border-radius:16px!important;padding:14px!important;margin:0 0 14px!important;font-size:14.5px!important;line-height:1.45}
html.tm:not(.a11y) .ck-ban{background:#fff!important;border:1px solid var(--tm-line)!important;box-shadow:var(--tm-shadow)!important;color:var(--tm-ink2)!important}
html.tm:not(.a11y) .ck-ban b{color:var(--tm-ink)}
html.tm .ck-ban .ck-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:12px 0 6px!important}
html.tm .ck-ban .ck-b{min-height:48px!important;border-radius:12px!important;font:650 15px/1.2 var(--tm-font)!important;padding:8px 10px!important}
html.tm:not(.a11y) .ck-ban .ck-b{border:1px solid var(--tm-line2)!important;background:#fff!important;color:var(--tm-ink)!important}
html.tm:not(.a11y) .ck-ban .ck-b[data-v=all]{background:var(--tm-brand)!important;border-color:var(--tm-brand)!important;color:#fff!important}
html.tm:not(.a11y) .ck-ban .ck-more{color:var(--tm-brand)!important}
html.tm .en-strip{border-top:0!important;margin:22px 0 4px!important;padding:0!important}
html.tm .en-strip .en-h{font-size:12.5px!important;text-transform:uppercase;letter-spacing:.07em;color:var(--tm-ink3)!important}
html.tm .en-strip .en-in{border-radius:12px!important;padding:10px 12px!important}
html.tm:not(.a11y) .en-strip .en-in{background:#fff!important;border:1px solid var(--tm-line)!important}
html.tm:not(.a11y) .en-strip .en-name{color:var(--tm-ink)!important}html.tm:not(.a11y) .en-strip .en-q{color:var(--tm-ink2)!important}
html.tm .lg-legal{font-size:13px!important;color:var(--tm-ink3)!important;margin:18px 0 6px!important}
html.tm:not(.a11y) .lg-legal a,html.tm:not(.a11y) .lg-legal button{color:var(--tm-ink2)!important}

/* ---------- Accessibility sheet + 999 check screen + misc overlays ---------- */
html.tm:not(.a11y) .el-set{border-radius:20px 20px 0 0}
html.tm .el-set h2{font-weight:700;letter-spacing:-.02em}

/* ---------- Login screen (signed out): same look; its one 999 sits bottom right ---------- */
html.tm #lgate{font-size:18px}
html.tm:not(.a11y) #lgate{background:var(--tm-bg)!important;color:var(--tm-ink)!important}
html.tm #lgate .lg-box{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
html.tm #lgate h1{font-size:28px;letter-spacing:-.025em;font-weight:750}
html.tm:not(.a11y) #lgate h1{color:var(--tm-ink)}
html.tm:not(.a11y) #lgate .lg-help{background:#fff;border:1px solid var(--tm-line);box-shadow:var(--tm-shadow)}
html.tm #lgate .lg-999row{padding:10px 14px;margin:0!important}
html.tm:not(.a11y) #lgate .lg-999row{background:var(--tm-danger-soft);color:#8A1C16}
html.tm #lgate .lg-999row .r999{position:fixed!important;right:14px!important;left:auto!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;z-index:5;width:auto!important;min-width:124px!important;height:52px!important;padding:0 18px!important;
 border-radius:14px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;font:800 20px/1 var(--tm-font)!important}
html.tm:not(.a11y) #lgate .lg-999row .r999{background:var(--tm-danger)!important;color:#fff!important;border:0!important;box-shadow:0 4px 14px rgba(196,35,28,.4)!important}
html.tm #lgate input[type=email],html.tm #lgate input[type=password],html.tm #lgate input[type=text]{border-radius:12px!important;min-height:56px!important;font-size:18px!important}
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:1px solid #98A2B3!important;color:var(--tm-ink)!important}
html.tm #lgate .lg-go{min-height:56px!important;font-size:18px!important;font-weight:700!important;border-radius:14px!important}
html.tm:not(.a11y) #lgate .lg-go{background:var(--tm-brand)!important}
html.tm #lgate .lg-sw{min-height:52px!important;font-size:17px!important;border-radius:14px!important;border-width:1px!important}
html.tm:not(.a11y) #lgate .lg-sw{color:var(--tm-brand)!important;border-color:var(--tm-line2)!important}
html.tm #lgate .lg-safe{border-radius:14px!important;border-width:1px!important;font-size:18px!important;min-height:52px;line-height:52px!important}
html.tm:not(.a11y) #lgate .lg-safe{background:#FFF7E6!important;border-color:#F5C26B!important;color:#7A4A00!important}
html.tm .lg-lang-big{border-radius:14px!important;font-size:16px!important}
html.tm:not(.a11y) .lg-lang-big{background:#fff!important;border:1px solid var(--tm-line)!important}
html.tm:not(.a11y) #lgate .el-gatebar{background:#fff!important;border-bottom:1px solid var(--tm-line)!important;color:var(--tm-ink)!important}
html.tm:not(.a11y) #lgate .el-gatebar button{background:#fff!important;border:1px solid var(--tm-line2)!important;color:#344054!important;border-radius:12px!important}

/* ---------- Large print ---------- */
html.tm.bigtext #app .learn-grid,html.tm.bigtext #app .grid{grid-template-columns:1fr}
html.tm.bigtext #app .big:not(.row){flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;min-height:76px}
html.tm.bigtext #tabs>a span{font-size:12px}
@media(max-width:340px){html.tm #app .learn-grid{grid-template-columns:1fr}}

/* ---------- /privacy + /terms ---------- */
html.tm:not(.a11y) .lgl-body{background:var(--tm-bg);color:var(--tm-ink)}
html.tm:not(.a11y) .lgl-top{background:#fff;color:var(--tm-ink);border-bottom:1px solid var(--tm-line)}
html.tm:not(.a11y) .lgl-top a{color:var(--tm-ink)}
html.tm:not(.a11y) .lgl .card{border:1px solid var(--tm-line);border-radius:16px;box-shadow:var(--tm-shadow)}
html.tm:not(.a11y) .lgl h2{color:var(--tm-ink)}
html.tm:not(.a11y) .lgl a{color:var(--tm-brand)}
@media (prefers-reduced-motion:reduce){html.tm #app .big:active{transform:none}}
html.rmotion.tm #app .big:active{transform:none}
/* login screen helplines: plain rows (they carry their own emoji + text nodes); the moved 999 leaves no stray label */
html.tm #lgate .hhelp a{display:block!important;padding:12px 14px!important}
html.tm #lgate .hhelp a::after{content:none}
html.tm #lgate .lg-999row .el-clbl{display:none!important}
html.tm #lgate .lg-999row strong{font-size:17px}
html.tm body>header #home.el-brand:focus-visible{outline:3px solid #2E90FA;outline-offset:2px;border-radius:8px}

/* ================= Stage 2: shell pages (menus, account, Book Shop, Alert family page, Translate, 999 check screen, settings) ================= */
.tmi-w{display:inline-flex;vertical-align:-.18em;margin-inline-end:.4em;flex:none}
.tmi-w svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tm #app .big>b .tmi-w{margin:0}html.tm #app .big>b .tmi-w svg{width:22px;height:22px}
/* language picker */
html.tm #app #lq{min-height:52px;font-size:17px!important;padding-inline-start:14px}
html.tm #app h3.lg{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--tm-ink3);margin:20px 2px 8px}
/* Book Shop */
html.tm:not(.a11y) .bk-tile{border:1px solid var(--tm-line)!important;box-shadow:var(--tm-shadow)!important}
html.tm .bk-tile{border-radius:16px}
html.tm:not(.a11y) .bk-cover{background:#F2F4F7}
html.tm .bk-title{font-size:19px;font-weight:700;letter-spacing:-.015em}
html.tm .bk-desc,html.tm .bk-intro{font-size:16.5px}
html.tm:not(.a11y) .bk-desc,html.tm:not(.a11y) .bk-intro,html.tm:not(.a11y) .bk-by,html.tm:not(.a11y) .bk-meta{color:var(--tm-ink2)}
html.tm .bk-buy{min-height:52px;border-radius:12px;font-size:17px;font-weight:700}
html.tm:not(.a11y) .bk-buy{background:var(--tm-brand)}
html.tm .bk-chip{min-height:44px;border-width:1px;font-size:15px;font-weight:600}
html.tm:not(.a11y) .bk-chip{border-color:var(--tm-line2);color:#344054}
html.tm:not(.a11y) .bk-chip.on{background:var(--tm-brand);border-color:var(--tm-brand);color:#fff}
/* account / favourites / contributions */
html.tm .c-radio,html.tm .acct-chk{border-width:1px!important;border-radius:12px!important}
html.tm:not(.a11y) .c-radio,html.tm:not(.a11y) .acct-chk{border-color:var(--tm-line2)!important;background:#fff}
html.tm:not(.a11y) .acct-priv{background:var(--tm-brand-soft);color:#134E48}
html.tm .fav-go,html.tm .fav-x{border-radius:12px;border-width:1px;font-size:20px}
html.tm:not(.a11y) .fav-go{border-color:var(--tm-line2);color:var(--tm-brand)}
html.tm:not(.a11y) .fav-x{background:#FEF3F2;color:#B42318;border-color:#FECDCA}
/* Alert family page + Translate */
html.tm .safe-btn{border-radius:16px;font-weight:750;letter-spacing:-.01em}
html.tm:not(.a11y) .safe-btn{background:#F79009;color:#1D1300;box-shadow:0 2px 8px rgba(247,144,9,.3)}
html.tm .safe input{border-width:1px;border-radius:12px}
html.tm:not(.a11y) .safe input{border-color:#98A2B3}
html.tm:not(.a11y) .safe-link{color:var(--tm-brand)}
html.tm:not(.a11y) .tr-en .safe-btn,html.tm:not(.a11y) .tr-turn-en{background:var(--tm-brand)!important;color:#fff!important}
html.tm .tr-b{border-width:1px;border-radius:16px}
html.tm:not(.a11y) .tr-b{border-color:#F5C26B}html.tm:not(.a11y) .tr-b-en{border-color:#99CFC9}
html.tm .tr label select,html.tm .tr textarea{border-width:1px!important;border-radius:12px!important}
html.tm:not(.a11y) .tr-warn{background:#FFFAEB;border:1px solid #FEDF89;border-radius:12px;color:#7A4A00}
/* quizzes/games in the shell */
html.tm #app .opt{border-radius:12px}
html.tm:not(.a11y) #app .mcw-num{border:1px solid var(--tm-line);box-shadow:none}
html.tm:not(.a11y) #app .mcw-bar{border:1px solid var(--tm-line);box-shadow:none}
/* 999 check screen (gate999.js) */
html.tm #g999{background:rgba(16,24,40,.72)!important;font-family:var(--tm-font)!important;font-size:18px!important}
html.tm #g999>div{border-radius:20px!important;padding:20px!important;box-shadow:0 24px 48px rgba(16,24,40,.3)}
html.tm #g999 #g9h{font-size:24px!important;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
html.tm #g999 #g9go{border-radius:14px!important;font-size:22px!important;padding:16px!important;display:flex!important;align-items:center;justify-content:center}
html.tm #g999 #g9x,html.tm #g999 button{border-radius:12px!important;font-family:var(--tm-font)!important}
/* accessibility / settings sheet */
html.tm .el-set{font-size:17px}
html.tm:not(.a11y) .el-set button:not(.r999){border-radius:12px}
html.tm .el-set label{border-radius:12px}
/* login screen: an opaque bottom bar holds the fixed 999, and the page scrolls fully above it, so nothing (e.g. Log in) is ever hidden under the 999 */
html.tm #lgate::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(80px + env(safe-area-inset-bottom));z-index:4;pointer-events:none}
html.tm:not(.a11y) #lgate::after{background:#fff;border-top:1px solid var(--tm-line)}
html.tm.a11y #lgate::after{background:#000;border-top:3px solid #fff}
html.tm #lgate .lg-box{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
html.tm.bigtext #lgate::after,html.tm.a11y #lgate::after{height:calc(116px + env(safe-area-inset-bottom))}html.tm.bigtext #lgate .lg-box,html.tm.a11y #lgate .lg-box{padding-bottom:calc(140px + env(safe-area-inset-bottom))!important}

/* ===== White buttons (2026-10-16, Joseph): ALL green/blue/teal buttons -> white background, black text, 1.5px grey border, 12px radius,
   subtle shadow; hover/active light grey; selected chips = darker border + check mark (still white/black). Icons inside buttons are black.
   Exceptions kept: red 999, Alert family, red/danger (Log out, delete, report), quiz/game right-wrong colours, header/tab bar, "Easy to see". ===== */
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x){background:#fff!important;background-image:none!important;color:#111!important;border:1.5px solid #c9ced6!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(16,24,40,.06)!important;text-shadow:none!important}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x) *{color:#111!important}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x) svg{stroke:#111!important}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x) svg[fill]:not([fill=none]){fill:#111!important}
@media (hover:hover){html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x):hover{background:#f3f4f6!important}}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x):active{background:#f3f4f6!important}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x):is([aria-pressed=true],[aria-selected=true],[aria-checked=true],[aria-current=true],.on,.selected,#tm-x){border-color:#4b5563!important;background:#fff!important;color:#111!important;font-weight:700!important}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x):is([aria-pressed=true],[aria-selected=true],[aria-checked=true],.on,.selected,#tm-x):not(.ff-tab):not(.lv button)::before{content:"\2713\00a0"!important;color:#111!important;background:none!important;width:auto!important;height:auto!important;display:inline!important}
html.tm:not(.a11y) :is(button,input[type=button],input[type=submit],a.btn,a[role=button],[class$="-links"] a,.ff-map,.ff-dir,.dir-gmaps,.dir-big,.bk-buy,.bk-chip,.ck-b,.lg-go,.lg-sw,.pe-near,.vs-mic,.mq-links a,#tm-x):not(.r999,.rpar,.el-logout,.fav-x,.acct-del,.safe-btn:not(.tr-side .safe-btn),.ckin,.gv-rep,[class*="danger"],#g9go,.ok,.bad,.right,.wrong,.sel,.found,.mcw-done,.ws button,.mcw-grid *,header *,#tabs *,.el-cw *,.tab999 *,.lg-999row *,.el-resetbtn,.el-gear,#lang,.ah-ring *,.af-msg *,#tm-x):is(:disabled,[aria-disabled=true]){opacity:.55}
html.tm:not(.a11y) .hhelp a::after{background-color:#f3f4f6!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' 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")!important}
html.tm:not(.a11y) #app .big>b{background:#f3f4f6!important;color:#111!important}
html.tm:not(.a11y) .vs-w .vs-mic{border-radius:12px!important}

/* ===== I'm OK in the bottom emergency strip (2026-10-16): Alert family (left) · I'm OK (middle) · 999 (right, also in RTL). Same 48px height. ===== */
html.tm body #tabs>.tab999>.ci-w{order:2!important;display:flex!important;flex-direction:row;margin:0 auto!important;padding:0!important;min-width:0;flex:0 1 auto}
html.tm body #tabs>.tab999>.el-cw999,html.tm body #tabs>.tab999>.r999{order:3!important;margin:0!important}
html.tm body #tabs>.tab999>.el-cwpar,html.tm body #tabs>.tab999>a.rpar{flex:0 1 auto;min-width:0}
html.tm .tab999 .ci-l,html.tm .lg-999row .ci-l{display:none!important}
html.tm .tab999 .ckin,html.tm .lg-999row .ckin{width:auto!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:0 12px!important;border-radius:12px!important;
 display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px;font:650 15px/1.1 var(--tm-font)!important;white-space:nowrap;box-shadow:none!important;margin:0!important}
html.tm:not(.a11y) .tab999 .ckin,html.tm:not(.a11y) .lg-999row .ckin{background:#fff!important;color:#111!important;border:1.5px solid #c9ced6!important}
html.tm:not(.a11y) .tab999 .ckin svg,html.tm:not(.a11y) .lg-999row .ckin svg{color:#111}
html.tm .tab999 .ckin svg,html.tm .lg-999row .ckin svg{width:20px;height:20px;flex:none}
html.tm .tab999 .ckin .ci-t,html.tm .lg-999row .ckin .ci-t{unicode-bidi:plaintext}
html.tm body #tabs>.tab999{gap:8px!important;padding:8px 10px!important}
html.tm body #tabs>.tab999 a.rpar{padding:0 12px!important;font-size:15px!important}
html.tm body #tabs>.tab999 .r999{min-width:104px!important;padding:0 14px!important}
@media(max-width:374px){html.tm body #tabs>.tab999{gap:6px!important;padding:8px 6px!important}
 html.tm body #tabs>.tab999 a.rpar svg,html.tm .tab999 .ckin svg{display:none!important}
 html.tm body #tabs>.tab999 a.rpar,html.tm .tab999 .ckin{padding:0 9px!important;font-size:14px!important;white-space:normal;line-height:1.1!important;text-align:center}
 html.tm body #tabs>.tab999 .r999{min-width:88px!important;padding:0 10px!important}}
/* login screen: I'm OK sits in the bottom bar to the left of the 999 */
html.tm #lgate .lg-999row .ci-w{position:fixed;right:150px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;margin:0}

/* 29 Oct 2026 top-15 phone fit: long words in the cookie buttons wrap instead of overflowing */
html.tm .ck-ban .ck-btns{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}html.tm .ck-ban .ck-b{min-width:0;overflow-wrap:anywhere}