/* RESPONSIVE v3 (feat-responsive, 17 Oct 2026; Joseph-approved whole-site responsive). Loaded LAST on shell pages.
   1) shop pay buttons never cut off  2) bottom emergency strip shares the width fluidly (2 rows on narrow phones when I'm OK shows)
   3) header site name may wrap instead of "Eas…"  4) mini crossword grid fits (app.js)  999 behaviour/markup untouched. */
/* 1) SHOP: payment method labels always fully readable. Was: one nowrap row + text-overflow:ellipsis (shop.css "sh-pays-row"),
      so at 360px "Pay by card, Apple Pay or Google Pay" showed as "pple Pay". Now: stacked full-width, text wraps; side by side only when wide. */
#app .sh-pays.sh-pays-row{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:8px!important}
#app .sh-pays.sh-pays-row .sh-btn,#app .sh-pays.sh-pays-row .sh-sample-btn,#app .sh-pays .sh-free{width:100%!important;max-width:100%!important;flex:0 0 auto!important;min-width:0!important;height:auto!important;min-height:52px!important;
 white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important;line-height:1.25!important;text-align:center!important;padding:10px 14px!important;font-size:clamp(15px,4.2vw,17px)!important}
#app .sh-pays.sh-pays-row .sh-sample-btn[hidden]{display:none!important}
#app .sh-detail{container-type:inline-size}
@container (min-width:600px){#app .sh-pays.sh-pays-row{flex-direction:row!important;flex-wrap:wrap!important}#app .sh-pays.sh-pays-row .sh-btn{flex:1 1 240px!important;width:auto!important}#app .sh-pays.sh-pays-row .sh-sample-btn{flex:1 1 100%!important}}
#app .sh-code,#app .sh-code *{min-width:0;max-width:100%;box-sizing:border-box}
#app .sh-code input{flex:1 1 8em;width:auto}
/* bottom emergency strip: handled by shared/emrow.css (batch 1) */
/* 3) HEADER: on phones the site name may wrap onto 2 short lines instead of showing "Eas…"; the small house logo gives way below 431px
      and the language pill is a little tighter below 375px (globe + language name stay). */
@media (max-width:430px){
 html.tm:root body>header #home#home.el-brand .el-brand-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important;word-break:normal!important;font-size:clamp(12px,3.6vw,15px)!important;line-height:1.05!important;display:block}
 html:root body>header #home#home.el-brand>svg.el-logo,html:root body>header #home#home.el-brand>img{display:none!important}
}
@media (max-width:374px){
 html:root body>header{gap:3px!important;padding-left:6px!important;padding-right:6px!important}
 html:root body>header #lang.el-langpill{font-size:13px!important;padding-left:7px!important;padding-right:7px!important;gap:4px!important;max-width:35vw!important}
 html:root body>header #lang.el-langpill svg{width:20px!important;height:20px!important}
 html.tm:root body>header #home#home.el-brand .el-brand-name{font-size:clamp(11px,3.4vw,12px)!important}
}
/* 4) MINI CROSSWORD: the grid always fits the screen width. Square size = (box width - gaps) / N, 14-56px, computed in CSS with
      container units so it is also right with "Text size 200%" (CSS zoom) and after rotating; app.js sets --mcw-n (+ a JS fallback). Pinch-zoom still works. */
#app .mcw-wrap{overflow-x:auto;max-width:100%;container-type:inline-size}
@supports (width:1cqw){html #app #mcwg.mcw-grid{--mcw-s:clamp(calc(12px / var(--fs,1)),calc((100cqw - 10px - (var(--mcw-n,15) - 1) * 1px) / var(--mcw-n,15)),56px)!important}}
#app .mcw-grid{max-width:100%}
html.tm #app #mcwg .mcw-c input,html #app #mcwg .mcw-c input{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important;
 width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;font-size:max(calc(16px / var(--fs,1)),calc(var(--mcw-s) * .6))!important;line-height:1!important;touch-action:manipulation}
html #app #mcwg .mcw-c{overflow:hidden}
html #app #mcwg .mcw-n{max-width:calc(100% - 2px);overflow:hidden;font-size:clamp(6px,calc(var(--mcw-s) * .3),10px)!important;z-index:1}
#app .mcw-btns{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5em),1fr))!important}
#app .mcw-btns>*{min-width:0;white-space:normal}
/* 5) general: nothing wider than the screen */
#app img,#app video,#app iframe,#app canvas{max-width:100%}
#app pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* 6) "Text size 200%" (CSS zoom on #app): home feature tiles and consent labels wrap instead of pushing the page sideways */
html.bigtext #app .ft-tile{flex-wrap:wrap;min-width:0;max-width:100%;box-sizing:border-box}
html.bigtext #app .ft-tile .ft-tx{flex:1 1 7em;min-width:0}
html.bigtext #app .ft-tile b,html.bigtext #app .ft-tile small{overflow-wrap:anywhere}
html.bigtext #app .ft-home{grid-template-columns:minmax(0,1fr)!important}
html.bigtext #app label,html.bigtext #app a{min-width:0;max-width:100%;overflow-wrap:anywhere}
html.bigtext #app a:has(>.tm-w){flex-wrap:wrap}
html.bigtext #app a>b,html.bigtext #app a>.tm-w{white-space:normal!important;overflow-wrap:anywhere;min-width:0}
html.bigtext #app label>span{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
html.bigtext #app label>input[type=checkbox],html.bigtext #app label>input[type=radio]{flex:none}
@media (max-width:430px){
 html.bigtext #app :is(a,button,label).big,html.bigtext #app a.el-don-card,html.bigtext #app a:has(>.tm-w){flex-wrap:wrap!important;gap:6px!important;padding-left:8px!important;padding-right:8px!important}
 html.bigtext #app :is(a,button,label).big>*,html.bigtext #app a.el-don-card>*,html.bigtext #app a:has(>.tm-w)>*{min-width:0;max-width:100%}
 html.bigtext #app a.el-don-card .el-don-tx{flex:1 1 6em}
}
/* 7) LANDSCAPE PHONES / short screens (height <= 500px): compact header and bottom bars so content gets most of the height
      (was: header ~80 + emergency row ~70 + tab bar ~65 left ~170px of 390). Tab labels stay for screen readers. */
@media (max-height:500px) and (orientation:landscape){
 html.tm:root{--tm-strip:52px;--tm-nav:46px}
 html.tm:root body>header{padding-top:4px!important;padding-bottom:4px!important;min-height:0!important}
 html.tm:root body>header :is(button,a){min-height:44px!important;height:44px!important}
 html.tm:root body>header .el-slogan{display:none!important}
 html.tm:root body #tabs>.tab999:not(#rv3){min-height:52px!important;height:52px!important;padding-top:4px!important;padding-bottom:4px!important}
 html.tm:root body #tabs>.tab999:not(#rv3) :is(a.rpar,.esms-btn,.ckin,.r999){min-height:44px!important;height:44px!important;flex-direction:row!important;gap:6px!important;padding-top:0!important;padding-bottom:0!important}
 html.tm:root #tabs>a{min-height:46px!important;height:46px!important;padding-top:0!important;padding-bottom:0!important;justify-content:center!important}
 html.tm:root #tabs>a>span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
}
/* 8) CV builder + "Text size 200%" on narrow phones: form rows stack, link rows wrap */
@media (max-width:430px){
 html.bigtext #app :is(.id-row2,.id-hrow,.id-srow,.cv-cols,.id-cards){grid-template-columns:minmax(0,1fr)!important}
 html.bigtext #app .id-lgrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 html.bigtext #app a.big.row{flex-wrap:wrap!important}
 html.bigtext #app :is(.id-row2,.id-hrow,.id-srow) label{min-width:0}
}
@media (max-width:430px){html.bigtext #app :is(ol,ul):has(a.big){padding-inline-start:1.1em!important}html.bigtext #app :is(ol,ul) :is(ol,ul):has(a.big){padding-inline-start:0!important;list-style:none}html.bigtext #app a.big.row{padding-left:8px!important;padding-right:8px!important;gap:6px!important}}
#app .id-tpls{grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr))!important}
#app .id-tpl{min-width:0;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}#app .id-tpl *{min-width:0;max-width:100%}