/* responsive.css (16 Oct 2026, Joseph: "fully responsive on iOS Safari, Android Chrome and desktop"). Loaded LAST on
   the shell, /privacy and /terms. Width-based only (media queries), no UA sniffing. Safe areas via env(). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,video,svg,iframe,canvas{max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
table{max-width:100%}
/* iOS: inputs under 16px make Safari zoom in on focus */
input,select,textarea{font-size:max(16px,1em)}
/* touch targets >= 44px */
#tabs>a,#tabs button,header button,header a,.lg-go,.lg-sw,.ck-b,.r999,.rpar{min-height:44px}
header button,header a{min-width:44px}
/* safe areas: notch / Dynamic Island / home bar (needs viewport-fit=cover on the viewport meta) */
header{padding-top:max(10px,env(safe-area-inset-top))!important;padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important}
#tabs{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
#lgate .lg-box{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
#lgate{padding-top:env(safe-area-inset-top)}
.lgl-999{right:calc(10px + env(safe-area-inset-right))!important;bottom:calc(14px + env(safe-area-inset-bottom))!important}
[dir=rtl] .lgl-999{right:calc(10px + env(safe-area-inset-right))!important;left:auto!important}
/* Android address bar / iOS toolbars: dynamic viewport units instead of 100vh */
@supports (height:100dvh){
  #app iframe,iframe#sec{height:calc(100dvh - 230px)}
  html.tm #app iframe#sec{height:calc(100dvh - 230px)}
  #lgate{height:100dvh}
}
/* login screen: the 999 bar is gone for logged-out visitors (16 Oct 14:36) -> remove its backdrop + reserved space */
html.tm #lgate::after{display:none!important}
html.tm #lgate .lg-box,html.tm.bigtext #lgate .lg-box,html.tm.a11y #lgate .lg-box{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
/* "Emergency" label (was "999"): keep it on one line, shrink a little on narrow phones and for long translations */
.r999 .r999-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block;vertical-align:middle}
html.tm body #tabs>.tab999 .r999,.lgl-999 .r999{max-width:min(46vw,220px)!important}
@media(max-width:374px){html.tm body #tabs>.tab999 .r999{padding:0 10px!important;font-size:15px!important}}
/* Safari needs the prefix for frosted glass */
.in-glass,.mb-glass,.fr-glass{-webkit-backdrop-filter:blur(12px)}
/* layout by width: stack on phones, 2 columns on tablets, more on desktop */
@media(min-width:640px) and (max-width:1023px){html.tm #app .home-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:1024px){html.tm #app .home-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}#app{max-width:1100px;margin-left:auto;margin-right:auto}}
@media(min-width:1440px){#app{max-width:1240px}}
/* tap-target fixes found by qa/responsive_check.py */
.vs-mic{min-width:44px!important;min-height:44px!important}
.ck-set,.lgl-ckset{display:inline-flex!important;align-items:center;min-height:44px}
/* Glass contrast (Joseph's desktop photo, 16 Oct 14:43): cards were too faint on white. Stronger soft shadow, a subtle
   grey edge, and a more tinted pastel background so the frost reads. Solid fallbacks (bigtext/lowdata/reduced
   transparency) keep their own values from theme-glassy.css. */
html.tm:not(.a11y):not(.bigtext):not(.lowdata){
 --tg-bg:#EEF1F7;
 --tg-glass:rgba(255,255,255,.58);--tg-glass2:rgba(255,255,255,.74);--tg-glass3:rgba(255,255,255,.86);
 --tg-edge:rgba(17,24,39,.10);--tg-line:rgba(17,24,39,.12);
 --tg-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 36px rgba(20,30,60,.13),0 3px 10px rgba(20,30,60,.07);
 --tg-shadow-sm:0 1px 0 rgba(255,255,255,.9) inset,0 4px 14px rgba(20,30,60,.10)}
html.tm:not(.a11y):not(.lowdata) body,html.tm:not(.a11y):not(.lowdata) .lgl-body{background:
 radial-gradient(60vmax 60vmax at -8% -6%,rgba(160,222,190,.75),transparent 62%),
 radial-gradient(55vmax 55vmax at 108% 30%,rgba(180,200,255,.75),transparent 62%),
 radial-gradient(50vmax 50vmax at -6% 85%,rgba(255,214,170,.7),transparent 62%),
 radial-gradient(60vmax 60vmax at 106% 106%,rgba(218,196,255,.7),transparent 62%),
 radial-gradient(40vmax 30vmax at 50% 45%,rgba(205,225,255,.45),transparent 70%),var(--tg-bg) fixed!important}
@media(prefers-reduced-transparency:reduce){html.tm:not(.a11y){--tg-glass:#fff;--tg-glass2:#fff;--tg-glass3:#fff;--tg-edge:#D0D5DD}}
#preview:empty,#preview[hidden]{display:none!important}
.en-strip .en-logo{filter:none!important;opacity:1!important}
/* RESPONSIVE v2 (feat-responsive, 16 Oct 2026; Joseph-approved phone/tablet/desktop layout). Fixes from
   /workspace/plans/release-responsive-findings.md (M2 tap targets, L1 small text). Restyle only. 999 rules untouched. */
/* M2: login-gate top buttons + admin password field: 44px tall */
#lgate .el-gatebar button,#pw,#loginForm input,#loginForm button{min-height:44px!important}
#lgate .el-gatebar a.el-don-bar{height:44px!important;flex:none}
html #lgate .el-gatebar .el-gear,html #lgate .el-gatebar .el-resetbtn{height:44px!important;min-height:44px!important}
@media(max-width:374px){#lgate .el-gatebar{gap:6px!important;padding-left:6px!important;padding-right:6px!important}#lgate .el-gatebar button,#lgate .el-gatebar a.el-don-bar{padding-left:9px!important;padding-right:9px!important}}
/* M2: guide/tool link lists, breadcrumbs, sources, gov.uk/nhs.uk tips: 44px tall tap areas (inline links in sentences stay inline) */
.hb-crumb a,footer.hb-src li>a,.hb-guide ul>li>a,.hb-tool ul>li>a,#app .hb-hub ul>li>a,aside.hb-note p>a:only-child,#aout>p>a,a.tps-en{display:inline-flex;align-items:center;min-height:44px;padding-block:4px;box-sizing:border-box}
footer.hb-src a.hb-gt{display:inline-flex;align-items:center;min-height:44px}
/* M2: checkbox/radio rows: the whole label is the 44px target */
#app label:has(>input[type=checkbox]),#app label:has(>input[type=radio]){display:flex;align-items:center;gap:.5rem;min-height:44px}
#mp,#acat{min-width:24px;min-height:24px}
/* L1: small site-wide text up to 16px */
#app>p.el-info,#lgate .lg-legal,#lgate .lg-legal a,#app h2.tm-sh,#app .hb-small,#app .hb-small a,#app .hb-small b,#loginForm label{font-size:1rem!important}
#enStripH>span,.en-row .en-name{font-size:.9375rem!important}
.en-strip .en-h{flex-wrap:wrap}.en-strip .en-h>span{min-width:0;overflow-wrap:break-word}.en-row .en-q{font-size:.875rem!important}
@media(min-width:375px){html.tm #tabs>a>span{font-size:12.5px}}
@media(min-width:768px){html.tm #tabs>a>span{font-size:14px}}
/* narrow phones: hide the tiny slogan so the site name has room */
@media(max-width:390px){#home .el-slogan{display:none!important}}
/* long words / URLs never push the page sideways */
#app,#app *{overflow-wrap:break-word}
#app table{display:block;overflow-x:auto;max-width:100%}
/* tablets landscape / desktops: comfortable reading width for guides and tools */
@media(min-width:1024px){#app article.hb-guide,#app .hb-tool{max-width:820px;margin-left:auto;margin-right:auto}}
/* header: the site-name/home button stays a real 44px target on 320px phones (language pill gives way a little) */
html.tm body>header #home.el-brand{min-width:44px!important}
@media(max-width:359px){html.tm body>header{padding-inline:8px!important}html:root body>header #lang.el-langpill{max-width:33vw!important}}
/* H1: large print / "Easy to see": #app's zoom must not scale the section iframe a 2nd time (iOS Safari/WebKit lays the frame out
   wider than it shows, so sections were cut off). The frame scales itself: prefs.css html.bigtext.el-frame body zoom + rem font size. */
html.bigtext #app iframe#sec{zoom:calc(1 / var(--fs))}
html.a11y #app iframe#sec{zoom:calc(1 / max(1.25,var(--fs)))}