/* Interface copy wraps between words, never between the letters of a word. */
:root{word-break:normal;hyphens:none}
:root :is(.app-shell,.dialog,.dropdown-panel,.picker-dialog) :is(h1,h2,h3,h4,p,span,small,strong,label,button,summary,th,td,dt,dd,li){overflow-wrap:normal;word-break:normal;hyphens:none}
.button{min-width:min-content;max-width:100%;white-space:normal}
.field,.panel,.dialog-header>h2,.page-heading>div{min-width:0}
.field{max-width:100%}
.dropdown-trigger,.picker-trigger{min-width:0;max-width:100%}
.dropdown-value,.picker-trigger .picker-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-option>span{flex:1}

/* Raw account identifiers and pasted URLs may exceed the entire available row. */
:root :is(.app-shell,.dialog) :is(.profile-menu-identity,.profile-identity,.subscription-identity,.admin-user-identity,.admin-confirm-user,.care-role-identity,.care-message,.care-clients) :is(p,span,small,strong,h3){overflow-wrap:break-word}

/* Give short report values room, and keep both period arrows together. */
.nutrition-report-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.nutrition-report-toolbar .field{min-width:0;width:100%}
.nutrition-report-navigation{display:flex;gap:8px;grid-column:1/-1;justify-content:flex-end}

/* Client cards and role details use available space before wrapping actions. */
.care-clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));align-items:start}
.care-clients>.recipe-ingredient{min-width:0;margin:0}
.care-clients .tool-toolbar{margin-top:14px}
.care-role-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px}
.care-role-identity{flex:1 1 220px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.care-role-email,.care-role-status{font-size:.8rem;color:var(--muted)}
.care-role-row>.button{flex-shrink:0}

/* Preserve the compact grids; fit labels with smaller type and lighter spacing. */
@media(min-width:761px) and (max-width:1000px){
 .progress-week-stats>div{padding:12px 8px}
 .progress-week-stats span{font-size:.625rem}
 .tool-macros>div{padding-inline:10px}
 .tool-macros small{font-size:.625rem}
}
@media(max-width:760px){
 .nutrition-shortcut{padding:10px;gap:4px}
 .nutrition-shortcut>span{font-size:clamp(.7rem,3vw,.8rem);white-space:nowrap}
 .nutrition-shortcut>svg:first-child{width:18px;height:18px}
 .nutrition-shortcut>svg:last-child{width:10px;height:10px}
 .picker-calendar-choices button{font-size:.75rem;padding-inline:3px}
}
@media(max-width:600px){
 .nutrition-report-toolbar{gap:10px}
 .nutrition-report-toolbar .field>span{font-size:clamp(.66rem,3vw,.8rem)}
 .nutrition-report-toolbar :is(.dropdown-trigger,.picker-trigger){padding:12px 8px;gap:6px;font-size:clamp(.75rem,3.4vw,.875rem)}
 .nutrition-report-toolbar .dropdown-chevron{width:14px;height:14px}
 .nutrition-report-toolbar .picker-trigger svg{width:18px;height:18px}
 .nutrition-report-navigation{justify-content:space-between}
 .kitchen-summary span{font-size:clamp(.625rem,2.6vw,.72rem)}
 .nutrient-detail-grid :is(small,strong),.daily-nutrient-grid :is(small,strong){font-size:clamp(.66rem,2.9vw,.8rem)}
 .nutrient-detail-grid .daily-nutrient-stat{padding:10px 8px}
 .nutrient-detail-grid .daily-nutrient-stat>span{font-size:clamp(.66rem,2.9vw,.75rem)}
}
@media(max-width:380px){.nutrition-shortcut>span{font-size:.8rem}}