/* R71: viewport and form refinements for existing React applications. */
body.ho-ui-r71{--ho-ui-ink:#193b4c;--ho-ui-border:#cfe1eb;--ho-ui-soft:#f3fafd;--ho-ui-accent:#fff0b1;color-scheme:light;-webkit-text-size-adjust:100%}
body.ho-ui-r71,body.ho-ui-r71 *,body.ho-ui-r71 *::before,body.ho-ui-r71 *::after{box-sizing:border-box}
body.ho-ui-r71 :is(#root,main,section,article,fieldset,form,.ho-admin-content,.ho-admin-main,.ho-admin-workspace,.student-app,.parent-hub,.ph-main,.page){min-width:0}
body.ho-ui-r71 :is(input,select,textarea){min-width:0;max-width:100%;font-size:16px!important}
body.ho-ui-r71 :is(button,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:44px}
body.ho-ui-r71 :is(button,a,input,select,textarea){touch-action:manipulation}
body.ho-ui-r71 :is(button,a){overflow-wrap:anywhere}
body.ho-ui-r71 :is(h1,h2,h3,h4,p,small,label,dd,td,th){overflow-wrap:anywhere}
body.ho-ui-r71 :is(img,video,canvas,iframe,svg.recharts-surface){max-width:100%}
body.ho-ui-r71 :is(img,video){height:auto}
body.ho-ui-r71 textarea{resize:vertical;line-height:1.6}
body.ho-ui-r71 input:is([type=checkbox],[type=radio]){width:20px;height:20px;min-width:20px;min-height:20px;flex-shrink:0;accent-color:#287a98}
body.ho-ui-r71 :is(button,a,input,select,textarea):focus-visible{outline:3px solid #d5a827;outline-offset:3px}
body.ho-ui-r71 :is(.table-scroll,.ho-table-scroll,.overflow-x-auto,.work-table-wrap,.roster-table-wrap,.att-table-wrap,.ph-table-wrap){width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
body.ho-ui-r71 :is(.recharts-responsive-container,.recharts-wrapper){min-width:0!important;max-width:100%}
body.ho-ui-r71 :is([role=dialog],.work-dialog,.hw-dialog,.att-dialog,.reader-dialog,.ph-modal){max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto;overscroll-behavior:contain}
body.ho-ui-r71 :is(pre,.code){max-width:100%;overflow-x:auto}
body.ho-ui-r71 :is(.ho-control-links,.record-actions,.work-toolbar,.hw-toolbar){flex-wrap:wrap;gap:10px}
body.ho-ui-r71[data-ho-surface=controller]{background:#f5fafc;color:var(--ho-ui-ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.ho-ui-r71[data-ho-surface=controller]>header,body.ho-ui-r71[data-ho-surface=controller] #root>header{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:20px max(24px,calc((100vw - 1200px)/2));background:#fff;border-bottom:1px solid var(--ho-ui-border)}
body.ho-ui-r71[data-ho-surface=controller] main{width:100%;max-width:1200px;padding:32px 24px calc(48px + env(safe-area-inset-bottom));margin:auto}
body.ho-ui-r71[data-ho-surface=controller] h1{font-size:clamp(28px,3.2vw,38px);line-height:1.2;letter-spacing:-.8px}
body.ho-ui-r71[data-ho-surface=controller] h2{line-height:1.35;letter-spacing:-.3px}
body.ho-ui-r71[data-ho-surface=controller] :is(p,li){line-height:1.75}
body.ho-ui-r71[data-ho-surface=controller] nav{display:flex;flex-wrap:wrap;gap:10px}
body.ho-ui-r71[data-ho-surface=controller] nav :is(a,button){min-height:44px;white-space:normal;text-decoration:none}
body.ho-ui-r71[data-ho-surface=controller] :is(.fields,.media-grid){min-width:0}
body.ho-ui-r71[data-ho-surface=controller] .fields>*{min-width:0}
body.ho-ui-r71[data-ho-surface=controller] fieldset{min-width:0;margin:20px 0;padding:24px;border:1px solid var(--ho-ui-border);border-radius:16px;background:#fff}
body.ho-ui-r71[data-ho-surface=controller] label:not(.check){line-height:1.5}
body.ho-ui-r71[data-ho-surface=controller] .check{display:flex;align-items:flex-start;gap:12px;line-height:1.65}
body.ho-ui-r71[data-ho-surface=controller] .check input{margin-top:3px}
body.ho-ui-r71[data-ho-surface=controller] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:9px;padding:11px 12px;line-height:1.5}
body.ho-ui-r71[data-ho-surface=controller] .actions{display:flex;gap:10px;flex-wrap:wrap}
body.ho-ui-r71[data-ho-surface=controller] .table-scroll table{min-width:640px}
body.ho-ui-r71[data-ho-surface=controller] :is(.media-grid img,.image-preview){object-fit:contain;max-height:230px}
@media(max-width:1023px){
 body.ho-ui-r71 :is(.ho-admin-content,.ho-admin-main,.ho-admin-workspace){max-width:100%}
 body.ho-ui-r71 :is(.ho-control-links,.ho-control-links a){min-width:0}
 body.ho-ui-r71[data-ho-surface=controller] .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 body.ho-ui-r71 :is(.work-dialog,.hw-dialog,.att-dialog,.reader-dialog,.ph-modal,[role=dialog]){width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
 body.ho-ui-r71 :is(.work-overlay,.hw-overlay,.ph-modal-wrap){padding:12px}
 body.ho-ui-r71 .ho-admin-workspace :is(.overflow-x-auto,.ho-table-scroll) table{min-width:680px}
 body.ho-ui-r71 .ho-admin-main{padding-left:16px!important;padding-right:16px!important}
 body.ho-ui-r71 :is(.filters,.work-toolbar,.hw-filters,.hw-fields,.roster-filters,.timetable-filters){max-width:100%;min-width:0}
 body.ho-ui-r71 :is(.filters,.work-toolbar,.roster-filters) :is(.field,.work-field,label){min-width:0;max-width:100%}
 body.ho-ui-r71 .ho-control-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.ho-ui-r71 .ho-control-links a{display:flex;align-items:center;justify-content:center;min-height:46px;text-align:center;font-size:12px;padding:10px}
 body.ho-ui-r71[data-ho-surface=controller] main{padding:26px 16px calc(36px + env(safe-area-inset-bottom))}
 body.ho-ui-r71[data-ho-surface=controller] #root>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:16px;gap:12px;font-size:12px}
 body.ho-ui-r71[data-ho-surface=controller] #root>header strong{grid-column:1/-1;grid-row:1;font-size:15px}
 body.ho-ui-r71[data-ho-surface=controller] :is(.fields,.band,.media-grid){grid-template-columns:minmax(0,1fr);gap:16px}
 body.ho-ui-r71[data-ho-surface=controller] fieldset{padding:20px 16px}
 body.ho-ui-r71[data-ho-surface=controller] :is(.card,.guide,.preview){padding:20px 16px}
 body.ho-ui-r71[data-ho-surface=controller] nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body.ho-ui-r71[data-ho-surface=controller] nav :is(button,a){width:100%;padding:10px 8px;font-size:12px}
 body.ho-ui-r71[data-ho-surface=controller] :is(.actions,.savebar){position:static;display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
 body.ho-ui-r71[data-ho-surface=controller] :is(.actions,.savebar) button{width:100%}
 body.ho-ui-r71[data-ho-surface=controller] :is(.code,pre){font-size:13px}
}
@media(max-width:420px){body.ho-ui-r71 .ho-control-links{grid-template-columns:minmax(0,1fr)}body.ho-ui-r71[data-ho-surface=controller] :is(h2,legend){font-size:21px}}
@media(prefers-reduced-motion:reduce){body.ho-ui-r71 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}