/* Shared sizing keeps inputs and nested flex/grid content inside the viewport. */
*,*::before,*::after{box-sizing:border-box}
input,select,textarea{max-width:100%;min-width:0;font-family:inherit}
button,a,input,select,textarea{touch-action:manipulation}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid #348f77;outline-offset:3px}
.page,.panel,.form,.grid-2>*{min-width:0}
.header-row,.editor-header-actions,.review-field-label,.rubric-row-header{gap:12px;flex-wrap:wrap}
.header-row h2{overflow-wrap:anywhere}
.inline-form{flex-wrap:wrap;align-items:center}
.inline-form input{flex:1 1 160px}
.row-with-remove input,.row-with-remove textarea{min-width:0}
.checkbox-row{flex-direction:row;min-height:44px}
.checkbox-row input{flex:none;width:20px;height:20px}
.notification-dropdown{max-width:calc(100vw - 32px)}
.review-field-text,.assignment-title,.assignment-meta,.tip,.notice,[role="status"]{overflow-wrap:anywhere}
@media screen and (max-width:640px){
  body{line-height:1.5}
  .page{width:100%;padding:20px 12px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .page.centered{padding-top:36px}
  .panel{padding:16px 12px;margin-bottom:16px}
  .page h2{font-size:24px;line-height:1.25;margin:8px 0}
  .panel h3{font-size:20px;line-height:1.3;margin-top:4px}
  .form,.stack{max-width:100%}
  input,select,textarea,.editor textarea,.suggest-box input,.suggest-box textarea,.suggestion-actions input{font-size:16px}
  input:not([type="checkbox"]):not([type="radio"]),select{min-height:44px}
  .button,.link{min-height:44px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
  .button{white-space:normal}
  .header-row{align-items:flex-start;margin-bottom:20px}
  .editor-header-actions{width:100%;gap:8px}
  .editor-header-actions .button{flex:1 1 140px}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .inline-form{gap:10px}
  .inline-form>.button{flex:1 1 140px}
  .row-with-remove{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:16px}
  .row-with-remove input,.row-with-remove textarea{width:100%}
  .row-with-remove>.link{justify-self:end}
  .row-with-remove:has(.step-number){grid-template-columns:24px minmax(0,1fr)}
  .row-with-remove .step-number{grid-column:1;grid-row:1}
  .row-with-remove:has(.step-number)>textarea{grid-column:2;min-height:128px}
  .row-with-remove:has(.step-number)>div{grid-column:2;justify-content:flex-end}
  .row-with-remove:has(.step-number)>div .link{min-width:44px;border:1px solid #cbd9d4;border-radius:6px}
  .editor textarea{min-height:100px;line-height:1.5}
  /* Keep wide rosters within their own scroll area, without squeezing columns. */
  .table,.report-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .table th,.table td,.report-table th,.report-table td{min-width:90px;padding:10px 8px;vertical-align:top}
  .table th:first-child,.table td:first-child{min-width:48px}
  .table .button{min-width:88px}
  .notification-dropdown{position:fixed;top:80px;left:12px;right:12px;width:auto;max-width:none;max-height:60vh}
  .review-field-label,.rubric-row-header{align-items:flex-start}
  .suggestion-actions{align-items:stretch}
  .suggestion-actions input{min-width:0;flex-basis:100%}
}
@media screen and (max-width:360px){.panel{padding:12px 10px}.page{padding-left:8px;padding-right:8px}}
@media screen and (pointer:coarse){
  .button,.link{min-height:44px;min-width:44px}
  input:not([type="checkbox"]):not([type="radio"]),select{min-height:44px;font-size:16px}
  .editor textarea,.suggest-box textarea{font-size:16px}
}
.row-with-remove:has(.inline-feedback){flex-wrap:wrap}
.row-with-remove>.inline-feedback{flex-basis:100%;order:3;width:100%}
.inline-feedback:empty{display:none}
@media screen and (max-width:640px){.row-with-remove:has(.step-number)>.inline-feedback{grid-column:2;order:3}}