/* Shared, parameterized accessibility and reflow refinements. */
:root{--control-border:#7d8e98;--control-size:44px;--page-gutter:clamp(16px,3vw,40px);--dialog-gutter:16px;--drawer-width:280px}
[hidden]{display:none!important}
html{scroll-padding-block:18px}
body{overflow-wrap:break-word}
.workspace,.main-content,.panel,.course-card,.teacher-course-card,.two-columns>*{min-width:0}
.sidebar{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-block-end:max(22px,env(safe-area-inset-bottom))}
.sidebar nav{gap:4px}.sidebar nav a,.sidebar nav button{min-height:var(--control-size);padding-block:10px}
.sidebar-bottom{flex-shrink:0}.nav-label{margin-block-start:28px}
.page-heading,.section-heading,.table-actions,.card-actions{flex-wrap:wrap}
.page-heading>*{min-width:0}.page-heading h1,.section-heading h2,.breadcrumb{overflow-wrap:anywhere}
.icon-button{width:var(--control-size);height:var(--control-size);flex-shrink:0}
.button,.small-button,.inline-form select,.list-row select{min-height:var(--control-size)}
.small-button{min-width:var(--control-size)}
.icon-button,.small-button,.subtle,input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--control-border)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.field-error input,.field-error textarea,.field-error select{border-color:var(--danger);border-width:2px}
.field label .sr-only{color:inherit}
.form-errors{padding:14px 18px;background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger);border-radius:var(--radius-sm);margin-block-end:20px}
.form-errors p{font-weight:700}.form-errors .errorlist{margin-block-end:0}
.file-picker:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.file-picker small{min-width:0;overflow-wrap:anywhere}
.help,.errorlist,.form-errors{overflow-wrap:anywhere}
.table-wrap,.roll-table-scroll{max-width:100%;scrollbar-gutter:stable;overscroll-behavior-inline:contain}
.table-wrap:focus-visible,.roll-table-scroll:focus-visible{outline-offset:2px}
.modal{max-height:calc(100vh - 2*var(--dialog-gutter));max-height:calc(100dvh - 2*var(--dialog-gutter));max-width:calc(100% - 2*var(--dialog-gutter));overscroll-behavior:contain;scrollbar-gutter:stable}
#standard-modal{padding-block-start:68px}
.modal-close{width:var(--control-size);height:var(--control-size)}
.modal h2{overflow-wrap:anywhere}
.modal .question-text,.modal .announcement-body{overflow-wrap:anywhere}
html:has(dialog[open]),html.menu-open{overflow:hidden}
.topbar-start,.topbar-actions,.user-chip{min-width:0}
.user-chip>span:last-child{max-width:180px;overflow-wrap:anywhere}
.connection{flex-shrink:0}.connection span{max-width:110px;line-height:1.7}
.topbar{height:auto;min-height:88px;padding-block:14px}
.topbar-actions{gap:clamp(8px,1.4vw,22px)}
.page-footer{gap:8px 20px;flex-wrap:wrap}
.text-link:focus-visible,.breadcrumb a:focus-visible{border-radius:4px}
.notification-panel{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px)}
.question-image{max-width:100%;height:auto}
.question-text .katex-display{overflow-x:auto;overflow-y:hidden;padding:4px 2px;max-width:100%}
.course-title,.thread-heading,.announcement-body{min-width:0;overflow-wrap:anywhere}
@media(min-width:851px) and (max-height:800px){.sidebar{padding-block-start:20px}.sidebar .nav-label{margin-block:20px 10px}.sidebar-bottom{padding-block-start:18px}.quiet-note{display:none}}
@media(max-width:850px){
  .sidebar{width:min(var(--drawer-width),calc(100vw - 56px));padding-block-start:max(24px,env(safe-area-inset-top));visibility:hidden;transition:transform var(--duration),visibility var(--duration)}
  .sidebar.open{visibility:visible}.topbar{min-height:72px;padding-block:10px}.sidebar .brand{padding-inline-end:35px}
  .sidebar .brand small{font-size:12px}.sidebar nav a,.sidebar nav button{padding-block:12px}.sidebar .nav-label{margin-block:26px 12px}
  .main-content{padding-inline:var(--page-gutter)}
}
@media(max-width:640px){
  :root{--dialog-gutter:8px}.topbar{padding-inline:12px;gap:8px}.topbar-actions{gap:8px}.connection{font-size:11px}.connection span{max-width:92px}
  .user-chip{display:none}.modal:not(.roll-modal){padding-inline:18px}.activity-modal{padding:28px 20px}
  .main-content{padding-block:22px 30px}.panel{padding:20px}.two-columns{gap:18px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  .page-heading>.button{font-size:12px}.card-actions .button,.teacher-course-actions .button{font-size:12px}
  .details{grid-template-columns:minmax(80px,1fr) minmax(0,2fr);gap:14px}.details dd{overflow-wrap:anywhere}
  .modal .table-actions{gap:10px}.modal .table-actions .button{flex:1}
  .notification-panel{inset-inline:12px;width:auto}.page-footer{font-size:11px}
}
@media(max-width:360px){.topbar-actions{gap:6px}.connection span{max-width:82px}.teacher-course-actions{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}.stat{display:flex;align-items:center}.stat-icon{margin:0}.stat div>span{font-size:12px}.hero-copy{max-width:100%}.hero-visual{display:none}.panel{padding:16px}}
@media(max-height:500px){.modal{--dialog-gutter:6px}.activity-clock{font-size:36px;margin-block-start:12px}.attendance-orbit{width:50px;height:50px;margin-block:16px}.activity-body form{margin-block:14px}.activity-modal{padding-block:22px}.notification-panel{max-height:calc(100dvh - 86px)}.login-panel{padding-block:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sidebar{transition:none}}
@media(forced-colors:active){.button,.small-button,.icon-button,.badge,.calendar-day{border:1px solid ButtonText}.status-dot,.notification-dot{background:Highlight;forced-color-adjust:none}:focus-visible{outline-color:Highlight}}
@media print{html:has(dialog[open]),html.menu-open{overflow:visible}.sidebar{display:none!important}}