/* donate.css (16 Oct 2026): Donate header button, home card, login-screen link. Glassy theme; works in Easy to see (a11y). */
body>header a.el-donate{flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;
 height:var(--el-hb,42px);min-width:var(--el-hb,42px);padding:0 12px;margin:0;border-radius:14px;text-decoration:none;
 font:700 14px/1 Inter,system-ui,sans-serif;color:#7a1f3d;background:rgba(255,241,245,.92);border:1px solid #f5c2d1;
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 8px rgba(20,30,60,.06);-webkit-tap-highlight-color:transparent;white-space:nowrap}
body>header a.el-donate svg{width:20px;height:20px;flex:none;fill:#e0457b}
body>header a.el-donate:hover{background:#ffe4ec}
body>header a.el-donate:active{transform:scale(.95)}
body>header a.el-donate:focus-visible{outline:3px solid #2E90FA;outline-offset:2px}
/* Phones: the signed-in header (brand + slogan, Reset, Accessibility, Language, Log out) has no spare room – any extra
   button clips "EasyLife UK" (measured 320-414px). So below 480px the header button is hidden and the home card /
   login-screen link are the Donate entry points. 480-759px: icon-only square; 760px+: "♥ Donate" pill. */
@media (max-width:759px){body>header a.el-donate{width:var(--el-hb,42px);padding:0}body>header a.el-donate .el-donate-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:479px){body>header a.el-donate{display:none!important}}
html.a11y body>header a.el-donate{background:#fff;color:#000;border:2px solid #000}html.a11y body>header a.el-donate svg{fill:#000}
@media (prefers-reduced-motion:reduce){body>header a.el-donate:active{transform:none}}
/* home card */
#app a.el-don-card{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:14px 16px;border-radius:22px;text-decoration:none;color:#0B0B0C;
 background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.95);
 box-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)}
#app a.el-don-card .el-don-ico{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff1f5;border:1px solid #f5c2d1}
#app a.el-don-card .el-don-ico svg{width:24px;height:24px;fill:#e0457b}
#app a.el-don-card .el-don-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app a.el-don-card .el-don-tx b{font-size:16px;line-height:1.25}
#app a.el-don-card .el-don-tx small{font-size:14px;line-height:1.3;color:#3D4148}
#app a.el-don-card .el-don-go{flex:none;padding:10px 14px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:14px;background:#0B0B0C;color:#fff;font-weight:700;font-size:15px}
#app a.el-don-card:focus-visible{outline:3px solid #2E90FA;outline-offset:2px}
@media (max-width:360px){#app a.el-don-card{gap:10px;padding:12px}#app a.el-don-card .el-don-ico{width:38px;height:38px}#app a.el-don-card .el-don-go{padding:8px 10px;font-size:14px}}
html.bigtext #app a.el-don-card,html.lowdata #app a.el-don-card{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#D0D5DD}
@media (prefers-reduced-transparency:reduce){#app a.el-don-card{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
html.a11y #app a.el-don-card{background:#fff;color:#000;border:2px solid #000;-webkit-backdrop-filter:none;backdrop-filter:none}html.a11y #app a.el-don-card small{color:#000}
/* login screen link */
#lgate a.el-don-gate{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 4px;padding:10px 14px;min-height:44px;box-sizing:border-box;max-width:100%;
 border-radius:14px;text-decoration:none;font-weight:700;font-size:15px;color:#7a1f3d;background:rgba(255,241,245,.92);border:1px solid #f5c2d1}
#lgate a.el-don-gate svg{width:20px;height:20px;flex:none;fill:#e0457b}
html.a11y #lgate a.el-don-gate{background:#fff;color:#000;border:2px solid #000}html.a11y #lgate a.el-don-gate svg{fill:#000}
/* 16 Oct 2026 (Joseph): Donate visible without scrolling at every width.
   Login screen: pill at the LEFT of the top bar (Reset / Accessibility stay on the right). */
#lgate .el-gatebar a.el-don-bar{margin-inline-end:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;box-sizing:border-box;border-radius:14px;
 text-decoration:none;font:700 15px/1 Inter,system-ui,sans-serif;color:#7a1f3d;background:rgba(255,241,245,.92);border:1px solid #f5c2d1;
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 8px rgba(20,30,60,.06);white-space:nowrap;-webkit-tap-highlight-color:transparent}
#lgate .el-gatebar a.el-don-bar svg{width:20px;height:20px;flex:none;fill:#e0457b}
#lgate .el-gatebar a.el-don-bar:focus-visible{outline:3px solid #2E90FA;outline-offset:2px}
html.a11y #lgate .el-gatebar a.el-don-bar{background:#fff;color:#000;border:2px solid #000}html.a11y #lgate .el-gatebar a.el-don-bar svg{fill:#000}
/* Signed-in phones (<480px): compact glass pill right under the greeting (header is full). Hidden on wider screens (header pill). */
#app a.el-don-top{display:none}
@media (max-width:479px){html:not(.lg-on) #app a.el-don-top{display:inline-flex;align-items:center;gap:6px;margin:-2px 0 12px;padding:0 14px;height:40px;box-sizing:border-box;border-radius:14px;
 text-decoration:none;font:700 15px/1 Inter,system-ui,sans-serif;color:#7a1f3d;background:rgba(255,241,245,.92);border:1px solid #f5c2d1;
 box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 8px rgba(20,30,60,.06);-webkit-tap-highlight-color:transparent}}
#app a.el-don-top svg{width:20px;height:20px;flex:none;fill:#e0457b}
#app a.el-don-top:focus-visible{outline:3px solid #2E90FA;outline-offset:2px}
html.a11y #app a.el-don-top{background:#fff;color:#000;border:2px solid #000}html.a11y #app a.el-don-top svg{fill:#000}