/* Full-width responsive layout (2026-11-01). Loaded last from base.html. Remove the <link> to revert. */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.wrap,.wrap-wide{max-width:none;width:100%;box-sizing:border-box;padding:16px clamp(12px,3vw,48px)}
.top,.foot{padding-left:clamp(12px,3vw,48px);padding-right:clamp(12px,3vw,48px)}
/* Text-heavy pages keep a comfy reading width */
.wrap.page-help,.wrap.page-signature,.wrap.page-text,.wrap.page-setpw,.wrap.page-login{max-width:920px;margin:0 auto}
/* Never let long emails / links push the page sideways */
.card,.ub-card,.bubble,.sb-row,.job,main p,main li{overflow-wrap:anywhere;word-break:normal}
main img,main table{max-width:100%}
.sb-tablewrap,.ph-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Easy-to-read minimum text size */
.tiny,.sub,.owner,.ids,.chip,.badge,.ub-age,.sb-ch,.sb-who,.bubble .who,.hint{font-size:max(.9rem,14px)!important}
.tiny{opacity:.9}
main{font-size:1.05rem;line-height:1.5}
@media (min-width:900px){
  body{font-size:17px}
  .top{flex-wrap:wrap}
  .top-nav{flex-wrap:wrap!important;overflow:visible!important;white-space:normal;-webkit-mask-image:none;mask-image:none}
  .top-nav a{font-size:1.05rem}
  /* Cards side by side on wide screens */
  #ub-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;align-items:start}
  #ub-cards>.ub-card{margin:0}
  #ub-cards>.ub-empty{grid-column:1/-1}
  ul.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px;align-items:start}
  ul.cards>li{margin:0}
  .st{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:stretch}
  .st>h1,.st>p,.st>div{grid-column:1/-1}
  .st>.job{margin:0}
  .stats,.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
}
@media (min-width:1500px){
  #ub-cards{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
}
@media (max-width:640px){
  .wrap{padding:12px}
  .btn,.ub-btn{min-height:48px}
}
/* Start here: keep the numbered list in one clear column */
@media (min-width:900px){.st{display:block!important;max-width:1100px}.st>.job{margin:0 0 14px}}
/* Sign-in / password pages: centred and big, easy fields */
.wrap:has(input[type=password]),.wrap.page-other:has(form input[type=email]){max-width:720px;margin:0 auto}
main input[type=password],main input[type=email],main input[type=text]:not([readonly]){width:100%;max-width:520px;min-height:48px;font-size:1.1rem;padding:0 12px;box-sizing:border-box;border:2px solid #9bb5a8;border-radius:10px;display:block;margin:.3rem 0 .8rem}
main form button[type=submit],main form .btn.primary{min-height:48px;font-size:1.1rem}