/* V201: compact, phone-first Goals + Shared Schedule.
   Scoped fixes only; no progress storage or calendar data format changes. */
html,body{max-width:100%;overflow-x:clip}
body:has(#ourGoals) .shell{width:100%;max-width:1160px}
body:has(#ourGoals) .layout,
body:has(#ourGoals) .main-col,
body:has(#ourGoals) .side-col,
body:has(#ourGoals) .panel,
body:has(#ourGoals) .goal-card,
body:has(#ourGoals) .goal-main,
body:has(#ourGoals) #goalsList{min-width:0;max-width:100%}
body:has(#ourGoals) .goal-title,body:has(#ourGoals) .cheer-item,
body:has(#ourGoals) .goal-meta{overflow-wrap:anywhere}
#page-whiteboard,#page-whiteboard .whiteboard-layout,#page-whiteboard .whiteboard-layout>div,
#page-whiteboard .weekly-grid,#page-whiteboard .side-card{min-width:0;max-width:100%}
#page-whiteboard .page-heading h1{font-size:clamp(2rem,6.3vw,3.6rem);line-height:1.07}
#page-whiteboard .whiteboard-toolbar{min-width:0;flex-wrap:wrap}
#page-whiteboard .week-move{min-width:0;max-width:100%;display:flex;align-items:center}
#page-whiteboard .week-move strong{font-size:clamp(.9rem,3.7vw,1.22rem);text-align:center;min-width:0}
#page-whiteboard .day-event{overflow-wrap:anywhere;hyphens:auto}
#page-whiteboard .schedule-form input,#page-whiteboard .schedule-form select{width:100%;min-width:0}
#page-whiteboard .olu177-mini-in-feature,#page-whiteboard .olu177-room{width:100%;max-width:100%}
@media(max-width:700px){
 body:has(#ourGoals) .shell{padding:10px 10px calc(80px + env(safe-area-inset-bottom))}
 body:has(#ourGoals) .head{gap:8px;flex-wrap:wrap;margin-bottom:8px}
 body:has(#ourGoals) .logo{min-width:0;flex:1}
 body:has(#ourGoals) .logo strong{font-size:clamp(1.2rem,5vw,1.65rem)}
 body:has(#ourGoals) .top-links{width:100%;justify-content:space-between;gap:4px}
 body:has(#ourGoals) .top-links a{flex:1;text-align:center;padding:7px 4px;font-size:clamp(.58rem,2.6vw,.73rem)}
 body:has(#ourGoals) .goals-quickbar{padding:8px 10px;margin-bottom:8px}
 body:has(#ourGoals) .layout{display:block}
 body:has(#ourGoals) .panel{padding:12px;border-radius:17px}
 body:has(#ourGoals) .main-col,body:has(#ourGoals) .side-col{gap:12px}
 body:has(#ourGoals) .panel-heading h2{font-size:clamp(1.45rem,5.8vw,2rem);margin:3px 0 7px}
 body:has(#ourGoals) .owner-tabs{margin-bottom:8px}
 body:has(#ourGoals) .owner-tab{min-width:0;white-space:normal;padding:8px 4px;line-height:1.2}
 body:has(#ourGoals) .goals-list{gap:9px}
 body:has(#ourGoals) .goal-card{gap:9px;padding:10px;border-radius:14px}
 body:has(#ourGoals) .goal-emoji{flex:0 0 35px;min-height:38px;font-size:20px}
 body:has(#ourGoals) .goal-actions{gap:5px}
 body:has(#ourGoals) .goal-actions button{min-height:35px;font-size:11px;padding:6px 8px;white-space:normal}
 body:has(#ourGoals) .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body:has(#ourGoals) .form-grid .field{min-width:0}
 body:has(#ourGoals) .form-grid .span2{grid-column:1 / -1}
 body:has(#ourGoals) .week-chart{min-height:95px}
 body:has(#ourGoals) .side-col{margin-top:12px}
 #page-whiteboard{padding:13px 10px calc(95px + env(safe-area-inset-bottom));width:100%}
 #page-whiteboard .page-heading{margin:2px 0 12px}
 #page-whiteboard .page-heading p{font-size:12px;line-height:1.4;margin:0}
 #page-whiteboard .whiteboard-toolbar{gap:8px;margin:6px 0 12px}
 #page-whiteboard .week-move{gap:6px;flex:1}
 #page-whiteboard .week-move button{width:31px;height:31px;flex:none}
 #page-whiteboard .week-move strong{font-size:13px}
 #page-whiteboard #thisWeek{padding:7px 10px;font-size:11px}
 /* Full-width weekly agenda. Every day and its entries fit inside the screen,
    instead of seven microscopic columns that clip and become unreadable. */
 #page-whiteboard #weeklyGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;overflow:visible;padding:0}
 #page-whiteboard #weeklyGrid .day-column{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:3px 9px;min-height:48px;padding:7px 10px;border-radius:12px;overflow:visible}
 #page-whiteboard #weeklyGrid .day-column header{grid-row:1 / span 30;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;border-right:1px solid #ad8e9b5c;padding:2px 8px 2px 0;margin:0;min-height:33px}
 #page-whiteboard #weeklyGrid .day-column header span{font-size:11px;font-weight:700;line-height:1.2}
 #page-whiteboard #weeklyGrid .day-column header strong{font-size:20px;line-height:1.1}
 #page-whiteboard #weeklyGrid .day-event{grid-column:2;display:block;font-size:12px;line-height:1.36;margin:2px 0;padding:6px 8px;border-radius:7px;max-width:100%}
 #page-whiteboard #weeklyGrid .day-event small{font-size:10px}
 #page-whiteboard .whiteboard-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 #page-whiteboard .olu178-calendar-near{margin-top:8px}
 #page-whiteboard .section-heading h2{font-size:clamp(1.35rem,5vw,2rem)}
 #page-whiteboard .sticky-panel{position:static;padding:12px}
 #page-whiteboard .schedule-form{padding:12px}
}
@media(max-width:375px){
 body:has(#ourGoals) .goal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #page-whiteboard #weeklyGrid .day-column{grid-template-columns:52px minmax(0,1fr);gap:5px;padding:6px 8px}
}
/* Prevent legacy min-height and grid row-span from making each day gigantic. */
@media(max-width:700px){
 #page-whiteboard #weeklyGrid .day-column{display:block;position:relative;min-height:52px!important;padding:6px 9px 6px 84px!important;overflow:visible}
 #page-whiteboard #weeklyGrid .day-column header{position:absolute;left:8px;top:6px;bottom:6px;width:61px;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 9px 0 0;border-right:1px solid #ad8e9b5c;border-bottom:0;margin:0}
 #page-whiteboard #weeklyGrid .day-event{display:block;width:100%;margin:3px 0;padding:6px 8px;line-height:1.32}
 #page-whiteboard #weeklyGrid .day-column:not(:has(.day-event))::after{content:'No plans yet';display:block;font-size:11px;color:#806d80;padding:7px 2px}
}
@media(max-width:375px){
 #page-whiteboard #weeklyGrid .day-column{padding-left:72px!important}
 #page-whiteboard #weeklyGrid .day-column header{width:50px}
}