/* no-spill.css — site-wide guard: button text never spills, clips or pushes a layout sideways.
   Loaded LAST on every page (keep it last; run files/button-audit-1020/audit2.js before a deploy).
   Jade (Alex's side), Oct 20 2026. Covers audit fixes F1–F5 from button-audit-1020/fixes.md, layered: nothing in the existing css files is edited.
   Rule of thumb: a text button wraps to 2 lines instead of overflowing; icon-only buttons keep their size;
   rows of buttons wrap; grids use minmax(0,1fr) so a long label can't widen a track past its container. */

/* 1. text buttons: wrap, never spill ------------------------------------------------------- */
.btn,a[class*="btn"],button[class*="btn"],a[class*="button"],a[class*="cta"],input[type=submit],input[type=button],input[type=reset],
.pill-btn,.nav-signin,.hx-btn,.fr-btn,.v4-apply-btn,.form-nav>a,.form-nav>button,[role=button]:not(.ur-tabbar a):not(.chip){
  white-space:normal!important;overflow-wrap:anywhere;word-break:normal;hyphens:manual;
  min-width:0;max-width:100%;box-sizing:border-box;text-overflow:clip;
}
.btn,a[class*="btn"],button[class*="btn"],.hx-btn,.fr-btn,.form-nav>a,.form-nav>button,input[type=submit],input[type=button]{
  height:auto;line-height:1.2;text-align:center;
}
/* generic <button>: never wider than its parent, wrap its text; height untouched so icon buttons keep their shape */
button{max-width:100%;min-width:0;box-sizing:border-box;white-space:normal!important;overflow-wrap:anywhere}
button:not([class*="btn"]):not(.form-nav>*):not(.ur-tabbar *){text-overflow:clip}
/* fixed-height role buttons on /login/ (roles.css #rl-go, #rl-t-up): grow with wrapped text */
#rl-go,#rl-t-up,#rl-t-in,.rl-tab{min-height:50px;height:auto!important;white-space:normal!important}
.hx-btn{flex:0 1 auto!important}

/* 2. rows of buttons wrap instead of overflowing ------------------------------------------- */
.form-nav,.hx-ctas,.ag-ctas,.cv-actions,.ab-actions,.uc-quick-row,#ddAsk,.actions,.cta-row,.btn-row,.btns,.buttons,.ctas,.fr-cta .form-nav,.post-cta .form-nav{
  flex-wrap:wrap;min-width:0;max-width:100%;
}
.form-nav>*,.hx-ctas>*,.ag-ctas>*,.cv-actions>*,.ab-actions>*,.uc-quick-row>*,#ddAsk>*,.actions>*,.cta-row>*,.btn-row>*,.btns>*,.buttons>*,.ctas>*{min-width:0;max-width:100%}
/* F1: the generic .form-nav pair (styles.css: flex:1 1 0;max-width:14rem) overflowed on every phone width */
.form-nav .btn{flex:1 1 auto;max-width:none}
@media (max-width:480px){
  .form-nav{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .form-nav .btn{width:100%}
}
.ja-card .btn,.uc-quick-row .btn,.cv-actions .btn,.ab-actions .btn,#ddAsk .btn{white-space:normal!important}

/* 3. things that are MEANT to stay on one line (scrollable rows, the desktop top menu) ----- */
.top .menu a,.v4-page .menu a,.chips.scroll .chip,.rl-nav a,.hx-menu a{white-space:nowrap!important}

/* 4. grids: 1fr may not grow past the grid (F4) -------------------------------------------- */
.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:759px){.tiles{grid-template-columns:none}}
@media (min-width:760px) and (max-width:1023px){.tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.tile,.hx-lvl,.hx-tile{min-width:0;overflow-wrap:anywhere}
.hx-lvl b{overflow-wrap:anywhere} /* only bites when a single word is wider than the tile (200% text); normal sizes still wrap at spaces */
@media (min-width:600px) and (max-width:999px){.hx-lvl b{font-size:min(1.15rem,2.2vw)!important}}
@media (max-width:999px){.hx-lvl-strip{grid-auto-columns:minmax(min(206px,100%),1fr)}}
@media (min-width:1000px){.hx-lvl-strip{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ja-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ja-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.ja-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rw-track{flex-wrap:wrap}.rw-track li{min-width:0}
@media (max-width:359px){.rw-track{grid-template-columns:repeat(5,minmax(0,1fr));padding-left:6px;padding-right:6px}.rw-track b{font-size:.62rem;overflow-wrap:anywhere}}

/* 5. bottom tab bar labels (F2): the type scales with the cell (measured: a label needs ~5.8px per font px, a cell is
   (vw-8)/7) so "Campaigns" fits at 320 (7.4px) through 414 (9.5px); 10px from 435px up. If the text is forced bigger
   (200% text size) the label breaks onto a second line inside the cell instead of running into the next one. */
.ur-tabbar span{white-space:normal!important;overflow:visible;text-overflow:clip;max-width:100%;overflow-wrap:anywhere;text-align:center;line-height:1;font-size:clamp(7px,2.3vw,10px)!important;letter-spacing:-.02em}
@media (max-width:360px){.ur-tabbar{padding-left:2px;padding-right:2px}.ur-tabbar a{gap:2px;padding:0}}

/* 6. signed-in desktop header (F3): wrap the member menu between 900 and 1559px ------------ */
@media (min-width:900px) and (max-width:1559px){
  html.ur-member-nav header.top.hx-top,body.rl-dash header.top.hx-top,body.sx header.top.hx-top{flex-wrap:wrap;row-gap:6px;height:auto}
  html.ur-member-nav .top .menu,body.rl-dash .top .menu,body.sx .top .menu{flex-wrap:wrap;min-width:0;row-gap:4px}
}
/* belt and braces: nothing may make a page scroll sideways */
html,body{overflow-x:clip}
/* edit-profile sticky save bar sits above the tab bar while the tab bar is visible */
.ep-bar{bottom:calc(var(--ur-tabbar,64px) + env(safe-area-inset-bottom))}
@media (min-width:1100px){.ep-bar{bottom:0}}

/* 7. page-specific (F5) --------------------------------------------------------------------- */
/* /brands/ hero: the action row may wrap (a mobile rule set it to nowrap) and the side column may shrink */
.uc-actions{flex-wrap:wrap!important}.uc-hero-side,.uc-hero-main>*{min-width:0;max-width:100%}
/* status pills on /connect/ and /settings/notifications/: wrap instead of running past the card */
.cx-top{flex-wrap:wrap}.cx-pill,.nt-pill{white-space:normal!important;overflow-wrap:anywhere;max-width:100%;text-overflow:clip}
.su-formats .card.su-f button.btn.line,.card.su-tpl button.btn.line{position:relative;z-index:1;margin-top:.4rem}
@media (max-width:360px){.fr-tpl .fr-copy,.fr-tpl button.fr-btn.sm{position:static;margin-bottom:6px}}
.ag-ctas{flex-wrap:wrap}

/* audit 1020-0018 P2: headings and tile titles never break mid-word.
   Overrides the overflow-wrap:anywhere rules above for headings only; the size clamps make the longest word fit. */
h1,h2,h3,h4{overflow-wrap:break-word;word-break:normal;hyphens:manual}
@supports (font-size:1cqi){
  .tile,.hx-tile{container-type:inline-size}
  .tile h2,.hx-tile h2{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
  .tile h2{font-size:min(1.7rem,14.5cqi)}
  .hx-tile h2{font-size:min(1.6rem,10.5cqi)}
}
@media (min-width:900px) and (max-width:1199px){#h-home{font-size:clamp(2.6rem,6.2vw,4.6rem)!important;overflow-wrap:normal}}
@media (max-width:419px){body[data-route="join"] h1.section-title{font-size:clamp(1.9rem,10.5vw,2.8rem)!important;overflow-wrap:normal}}
.learn-page h1.section-title{font-size:min(5.4rem,8.6vw)!important;overflow-wrap:normal}