/* hdr-buttons.css (15 Oct 2026, Joseph): the four top-right header buttons are ONE matching set.
   Order (logical, mirrors in RTL): Reset (↺) · ♿ Accessibility · 🌐 Language · Log out (signed in only).
   All: identical 42px circles, 2px border, same gap, vertically centred, white line icons on the teal header,
   soft translucent white fill. Log out keeps a light red tint. Labels stay as aria-label/title (translated).
   Visible text/emoji is hidden with font-size:0 and replaced by a white SVG icon (::before), so behaviour,
   click handlers and accessible names are untouched. Loaded LAST so it wins over style.css / prefs.css / logout-btn.js. */
:root{--el-hb:42px}
body>header{gap:6px!important;align-items:center!important}
body>header .el-resetbtn,body>header .el-gear,body>header #lang,body>header .el-logout,
html.a11y body>header .el-resetbtn,html.a11y body>header .el-gear,html.a11y body>header #lang,html.a11y body>header .el-logout{
 flex:none!important;box-sizing:border-box!important;
 width:var(--el-hb)!important;height:var(--el-hb)!important;min-width:var(--el-hb)!important;min-height:var(--el-hb)!important;max-width:var(--el-hb)!important;max-height:var(--el-hb)!important;
 padding:0!important;margin:0!important;border:2px solid rgba(255,255,255,.75)!important;border-radius:50%!important;
 background:rgba(255,255,255,.12)!important;color:#fff!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;vertical-align:middle!important;
 font-size:0!important;line-height:0!important;letter-spacing:0!important;gap:0!important;zoom:1!important;overflow:hidden;position:relative;cursor:pointer;
 -webkit-tap-highlight-color:transparent;transition:background-color .15s}
body>header .el-logout[hidden]{display:none!important}
body>header .el-gear span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
body>header .el-resetbtn::before,body>header .el-gear::before,body>header #lang::before{content:"";display:block;flex:none;width:22px;height:22px;background:center/22px 22px no-repeat}
/* ↺ reset */
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='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.6-5.9'/%3E%3Cpath d='M4 4.5v5h5'/%3E%3C/svg%3E")}
/* ♿ accessibility (universal access figure) */
/* ♿ wheelchair (2026-10-15, Joseph) */
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.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='3.8' r='1.9' fill='%23fff' stroke='none'/%3E%3Cpath d='M10 7.2v6.3h5.6l2.6 5.8 1.8-.8'/%3E%3Cpath d='M10 10.4h5'/%3E%3Cpath d='M7 10.6a5.6 5.6 0 1 0 7.9 6.7'/%3E%3C/svg%3E")}
/* 🌐 language (globe) */
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='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17'/%3E%3Cpath d='M12 3c-2.6 2.6-3.8 5.6-3.8 9s1.2 6.4 3.8 9c2.6-2.6 3.8-5.6 3.8-9S14.6 5.6 12 3z'/%3E%3C/svg%3E")}
/* Log out: same circle, light red tint */
body>header .el-logout,html.a11y body>header .el-logout{background:rgba(255,120,120,.30)!important;border-color:#ffb3b3!important;color:#ffe3e3!important}
html.a11y body>header .el-logout *{color:#ffe3e3!important}
body>header .el-logout svg{width:22px!important;height:22px!important}
body>header .el-resetbtn:hover,body>header .el-gear:hover,body>header #lang:hover{background:rgba(255,255,255,.24)!important}
body>header .el-logout:hover{background:rgba(255,120,120,.45)!important}
body>header .el-resetbtn:active,body>header .el-gear:active,body>header #lang:active,body>header .el-logout:active{transform:scale(.94)}
body>header .el-resetbtn:focus-visible,body>header .el-gear:focus-visible,body>header #lang:focus-visible,body>header .el-logout:focus-visible{outline:3px solid #ffd400!important;outline-offset:2px!important}
/* the "Simply UK" name gives way first; keep a little space before the buttons */
body>header #home.el-brand{margin-inline-end:2px!important}
@media (max-width:360px){:root{--el-hb:40px}body>header{gap:5px!important}}
@media (prefers-reduced-motion:reduce){body>header .el-resetbtn,body>header .el-gear,body>header #lang,body>header .el-logout{transition:none}body>header .el-resetbtn:active,body>header .el-gear:active,body>header #lang:active,body>header .el-logout:active{transform:none}}
html.rmotion body>header .el-resetbtn:active,html.rmotion body>header .el-gear:active,html.rmotion body>header #lang:active,html.rmotion body>header .el-logout:active{transform:none}
/* "Easy to see" (html.a11y): tap targets must be at least 44px, so the whole set grows together. */
html.a11y{--el-hb:44px!important}