/* el8.css (el-site-8, 21 Oct 2026, PREVIEW). Loaded LAST. */
/* ---- Translate: voice input states ---- */
.tr .tr-mic[aria-pressed=true],.tr .tr-mic.tr-on{background:#b42318!important;color:#fff!important;border-color:#7a1610!important}
.tr .tr-pulse{display:inline-block;animation:el8pulse 1.1s ease-in-out infinite}
@keyframes el8pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.65}}
html.rmotion .tr .tr-pulse{animation:none}@media (prefers-reduced-motion:reduce){.tr .tr-pulse{animation:none}}
.tr .tr-stat{min-height:1.4em;margin:6px 0;font-size:17px;font-weight:600;color:#1f2937}
.tr .tr-stat:empty{display:none}
.tr .tr-live{border:2px dashed #1e4f55;border-radius:12px;padding:8px 10px;margin:8px 0;background:#f4fbfb}
.tr .tr-live small{display:block;font-weight:800;font-size:14px;color:#1e4f55}.tr .tr-livet{font-size:22px;overflow-wrap:anywhere}
.tr .tr-nosr{font-size:17px}
.tr .tr-mic{overflow-wrap:anywhere}
/* ---- Home helpline bar: slim pill strip (one row, scrolls sideways on narrow phones with an edge fade) ---- */
#app .hhelp.el8-hh{display:block!important;padding:0!important;margin:8px 0 12px!important;background:none!important;border:0!important;box-shadow:none!important;min-height:0!important;position:relative}
#app .hhelp.el8-hh .el8-hhs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 22px 2px 2px;
 -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
[dir=rtl] #app .hhelp.el8-hh .el8-hhs{padding:2px 2px 2px 22px;-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)}
#app .hhelp.el8-hh .el8-hhs::-webkit-scrollbar{display:none}
#app .hhelp.el8-hh a{flex:none!important;display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:44px!important;height:44px!important;box-sizing:border-box!important;
 padding:0 14px 0 6px!important;margin:0!important;border-radius:999px!important;border:1.5px solid #c9d6dd!important;background:#fff!important;color:#0f2a33!important;
 font-size:14px!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;width:auto!important;max-width:none!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important}
#app .hhelp.el8-hh a::before,#app .hhelp.el8-hh a::after{display:none!important}
#app .hhelp.el8-hh a b{display:inline-flex!important;align-items:center;justify-content:center;min-width:34px;height:32px;padding:0 8px;border-radius:999px;background:#1e4f55;color:#fff!important;font-size:14px!important;font-weight:800;margin:0!important}
#app .hhelp.el8-hh a .tm-w{display:inline!important;font-size:14px!important;font-weight:700!important;color:inherit!important;white-space:nowrap!important;overflow:visible!important;margin:0!important;padding:0!important}
#app .hhelp.el8-hh a.hh999r{border-color:#C4231C!important;background:#fff5f4!important;color:#9b1a14!important}
#app .hhelp.el8-hh a.hh999r b{background:#C4231C}
#app .hhelp.el8-hh a[href="tel:111"] b{background:#1F6FD1}
#app .hhelp.el8-hh a:focus-visible{outline:3px solid #2E90FA!important;outline-offset:2px}
/* ---- Bottom emergency row: circle icons with labels / number badges ---- */
html body #tabs>.tab999.el8-erow,html.tm:root body #tabs>.tab999.el8-erow{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:space-between!important;
 gap:4px!important;padding:6px calc(8px + env(safe-area-inset-right)) 4px calc(8px + env(safe-area-inset-left))!important;min-height:0!important}
html body #tabs>.tab999.el8-erow>*,html.tm:root body #tabs>.tab999.el8-erow>*{flex:1 1 0!important;max-width:84px!important;min-width:44px!important;display:flex!important;justify-content:center!important;margin:0!important;order:0!important}
html.tm:root body #tabs>.tab999.el8-erow>.el-cwpar{order:1!important}html.tm:root body #tabs>.tab999.el8-erow>.esms-btn{order:2!important}html.tm:root body #tabs>.tab999.el8-erow>.ci-w{order:3!important}
html.tm:root body #tabs>.tab999.el8-erow>.el8-111{order:4!important}html.tm:root body #tabs>.tab999.el8-erow>.el8-101{order:5!important}html.tm:root body #tabs>.tab999.el8-erow>.el-cw999{order:6!important;margin:0!important}
html.tm:root body #tabs>.tab999.el8-erow .el-cw{width:auto!important}
html.tm:root body #tabs>.tab999.el8-erow .el-clbl,html.tm:root body #tabs>.tab999.el8-erow .ci-l{display:none!important}
html.tm:root body #tabs>.tab999.el8-erow a.rpar,html.tm:root body #tabs>.tab999.el8-erow .esms-btn,html.tm:root body #tabs>.tab999.el8-erow .ckin,html.tm:root body #tabs>.tab999.el8-erow .r999,html.tm:root body #tabs>.tab999.el8-erow .el8-tel{
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:2px!important;width:100%!important;min-width:44px!important;max-width:84px!important;height:auto!important;min-height:44px!important;
 padding:0 0 2px!important;margin:0!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:#1f2937!important;
 font:700 10.5px/1.1 var(--tm-font,system-ui,sans-serif)!important;text-align:center!important;text-decoration:none!important;white-space:normal!important;overflow:visible!important;cursor:pointer}
html.tm:root body #tabs>.tab999.el8-erow .r999::before,html.tm:root body #tabs>.tab999.el8-erow .r999::after{display:none!important}
html.tm:root body #tabs>.tab999.el8-erow .r999 .r999-t{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html.tm:root body #tabs>.tab999.el8-erow a.rpar>span:not(.el8-c),html.tm:root body #tabs>.tab999.el8-erow .esms-l,html.tm:root body #tabs>.tab999.el8-erow .ci-t{display:block!important;font-size:10.5px!important;line-height:1.1!important;max-width:84px!important;overflow-wrap:anywhere;hyphens:auto}
.el8-c{display:flex!important;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%!important;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.el8-c svg{width:28px!important;height:28px!important;display:block!important}
.el8-999{background:#C4231C;width:44px;height:44px}.el8-111-c{background:#1F6FD1}.el8-101-c{background:#1d2b5c}.el8-fam{background:#d96c00}.el8-sms{background:#0f766e}.el8-ok{background:#15803d}
.el8-num{display:block;font:800 11px/1.1 var(--tm-font,system-ui,sans-serif);color:#111827;letter-spacing:.02em}
.el8-erow .r999 .el8-num{color:#9b1a14}
.el8-erow button:focus-visible,.el8-erow a:focus-visible{outline:3px solid #2E90FA!important;outline-offset:2px}
html.a11y .el8-c{box-shadow:0 0 0 2px #000}
/* ---- Header accessibility button: dynamic ("active") accessibility symbol, white on access blue; size/position unchanged ---- */
/* specificity (0,4,3) beats the theme rules html.tm:not(.a11y) body>header .el-gear (0,3,3) that painted it white (white icon on white = blank) */
html:root body>header .el-gear.el-gear.el-gear{background:#005EB8!important;border-color:#005EB8!important;color:#fff!important}
html:root body>header .el-gear.el-gear.el-gear:hover{background:#0b4f99!important;border-color:#0b4f99!important}
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'%3E%3Ccircle cx='15.6' cy='3.4' r='2.1' fill='%23fff'/%3E%3Cpath d='M14.6 7.1 11.4 12.6h5.4l2.4 5.8' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4 9.2l4.2-1.1' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M8.6 10.4a6 6 0 1 0 7.6 8.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M2.2 9.6h3M1.4 13h2.6M2.2 16.4h2.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important}

/* ---- Home: no gaps in the category grid (odd tile count: the last tile spans two cells, so 2-, 3- and 4-column grids all close) ---- */
#app .cat-grid>a:last-child:nth-child(odd){grid-column:span 2}
/* ---- Home: Donate shown once (header Donate + Support card stay; the duplicate pill under the greeting is hidden on home) ---- */
body.is-home #app .el-don-top{display:none!important}
/* ---- Reset progress (Word games / Crosswords) ---- */
.el8-rst{display:block;margin:18px auto 8px;min-height:48px;padding:10px 18px;border-radius:12px;border:2px solid #b42318;background:#fff;color:#b42318;font-weight:700;font-size:17px;cursor:pointer}
.el8-dlg-w{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.el8-dlg{background:#fff;color:#111;border-radius:16px;max-width:420px;width:100%;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.el8-dlg h2{margin:0 0 8px;font-size:20px}.el8-dlg p{font-size:17px;line-height:1.4;margin:0 0 16px}
.el8-dlg-b{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.el8-dlg-b button{min-height:48px;min-width:110px;padding:8px 16px;border-radius:12px;font-size:17px;font-weight:700;cursor:pointer}
.el8-cancel{background:#fff;border:2px solid #374151;color:#111}.el8-reset{background:#b42318;border:2px solid #b42318;color:#fff}
.el8-dlg-b button:focus-visible,.el8-rst:focus-visible{outline:3px solid #2E90FA;outline-offset:2px}
.el8-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom));z-index:2001;background:#14532d;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;max-width:90vw;box-shadow:0 4px 14px rgba(0,0,0,.25)}
/* ---- Community: WhatsApp community tile ---- */
.el8-wa .el8-wa-s{display:block;font-size:12.5px;font-weight:500;line-height:1.25;margin-top:2px;opacity:.85}
.el8-wa .el8-wa-b{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#fff3cc;color:#7a4a00;border:1px solid #c58a00;font-size:11.5px;font-weight:800}
.el8-wa-need{cursor:default}
/* ---- device-matrix fixes (pre-existing on Version 1; same rules as stage-site-1's un-deployed 01:50 fixes) ---- */
.i2-ftl a,.lg-legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
html.tm:not(.a11y):not(#tgx):not(#tgx):not(#dmx) .hb .hb-card>.hb-t>.hb-open,.hb .hb-card>.hb-t>.hb-open{min-height:44px!important}
@media (max-width:520px){#home .el-slogan{display:none!important}}
/* ---- emergency row on short landscape screens: icon beside its label, one 44px row (never over the tab bar) ---- */
@media (max-height:500px) and (orientation:landscape){
 html.tm:root body #tabs>.tab999.el8-erow{align-items:center!important;padding-top:3px!important;padding-bottom:3px!important}
 html.tm:root body #tabs>.tab999.el8-erow a.rpar,html.tm:root body #tabs>.tab999.el8-erow .esms-btn,html.tm:root body #tabs>.tab999.el8-erow .ckin,html.tm:root body #tabs>.tab999.el8-erow .r999,html.tm:root body #tabs>.tab999.el8-erow .el8-tel{flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:4px!important;max-width:150px!important;padding:0!important}
 html.tm:root body #tabs>.tab999.el8-erow>*{max-width:150px!important}
 .el8-erow .el8-c{width:36px;height:36px}.el8-erow .el8-999{width:40px;height:40px}.el8-erow .el8-c svg{width:24px!important;height:24px!important}
}

/* My account tile on home while signed out (el-site-8) */
#app .home-grid:has(a.hg-acct) a.el8-acct{display:none}