/* Module styles are inserted before this final responsive override sheet. */
.mobile-nav, .mobile-segments { display: none; }
@media (width < 850px) {
 .farm-main, #main, #main * { min-width: 0; }
 #main { overflow-x: hidden; }
 .shell-bar { padding-inline: 12px; gap: 8px; }
 .shell-bar h1 { white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
 #main.art-stage { overflow-y: auto; }
 .art-workspace { height: auto; min-height: 100%; grid-template-rows: auto auto; }
 .art-kpis, .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .art-kpis .card { height: auto; min-height: 68px; }
 .art-toolbar, .art-status, .art-workspace .roster-tools { flex-wrap: wrap; }
 .art-toolbar .searchbox { flex-basis: 140px; }
 .art-workspace .assignment-card { max-height: none; flex-wrap: wrap; }
 .art-selectors select { max-width: 100%; }
 .it-stage .reports-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .it-stage .school-content { padding: 10px; }
}
@media (width < 640px) {
 .farm-shell { display: block; padding-bottom: calc(64px + env(safe-area-inset-bottom)); box-sizing: border-box; }
 .farm-shell.is-login, .farm-shell.is-detail { padding-bottom: 0; }
 .farm-shell > .side { display: none; }
 .farm-main { height: 100%; }
 .shell-bar { height: auto; min-height: 56px; flex-wrap: wrap; padding-block: 6px; }
 .shell-bar #logout { display: none; }
 .shell-acts { gap: 4px; }
 #main, #main.art-stage, #main.it-stage, #main.login-layout { padding: 10px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
 #main :is(button,.button,.btn,summary,input:not([type=checkbox],[type=radio]),select), .shell-bar .btn,
 .dialog :is(button,.button,.btn,summary,input:not([type=checkbox],[type=radio]),select) { min-height: 40px; }
 #main :is(button,.button,.btn,summary), .dialog :is(button,.button,.btn,summary) { min-width: 40px; }
 #main input:is([type=checkbox],[type=radio]), .dialog input:is([type=checkbox],[type=radio]) { width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; flex: none; vertical-align: middle; }
 #main :is(input,select,textarea), .dialog :is(input,select,textarea) { max-width: 100%; font-size: 16px; }
 #main :is(.row,.between,.card-heading,.selection-bar,.assignment-heading,.button-group) { flex-wrap: wrap; }
 #main :is(p,strong,small,h2,h3,label,td) { overflow-wrap: anywhere; }
 .selection-count { flex-wrap: wrap; }
 .selection-count > label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 40px; }
 /* A viewport-anchored action panel also fits menus in wrapped toolbars. */
 #main .art-more[open] > div, #main .it-more[open] > div {
  position: fixed; left: 8px; right: 8px; top: auto;
  bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 35;
  width: auto; min-width: 160px; max-width: none; max-height: 60dvh;
  box-sizing: border-box; overflow: auto; padding: 12px; gap: 6px;
 }
 #main :is(.art-more,.it-more) > div > .button { white-space: normal; overflow-wrap: anywhere; text-align: left; justify-content: flex-start; }
 .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; border-top: 1px solid var(--g6); background: var(--g1); }
 .mobile-nav > a, .mobile-more > summary { display: flex; align-items: center; justify-content: center; height: 64px; min-width: 40px; color: var(--g11); text-decoration: none; font-size: 13px; list-style: none; cursor: pointer; }
 .mobile-nav [aria-current=page], .mobile-more[open] > summary { background: var(--a3); color: var(--a11); font-weight: 600; }
 .mobile-more > div { position: absolute; right: 8px; bottom: 100%; display: grid; gap: 6px; width: min(260px,calc(100vw - 16px)); max-height: 65dvh; overflow: auto; padding: 12px; border: 1px solid var(--g6); border-radius: var(--r-md); background: var(--g1); box-shadow: var(--shadow-md); }
 .mobile-more button { min-height: 44px; text-align: left; padding: 8px; }
 .farm-shell.is-detail ~ .mobile-nav { display: none; }
 .mobile-segments { display: flex; flex: none; gap: 6px; padding: 6px 10px; overflow-x: auto; max-width: 100%; background: var(--g1); }
 .mobile-segments a { flex: none; min-height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--g11); }
 .mobile-segments [aria-current=page] { background: var(--a3); color: var(--a11); }
 .home-grid { height: auto; grid-template-columns: minmax(0,1fr); grid-template-rows: auto; }
 .home-grid > .card { min-height: 180px; max-height: none; }
 .home-list { max-height: 320px; }
 .today-banner { flex-wrap: wrap; }
 .today-stats { flex-wrap: wrap; gap: 12px; }
 .today-banner h2 { font-size: 22px; }
 .home-task input { align-self: center; }
 .art-workspace { height: auto; min-height: 100%; grid-template-rows: auto auto; }
 .art-selection:has(.art-assignment-kind) { flex-wrap: wrap; }
 .art-selection:has(.art-assignment-kind) .art-selectors { flex-basis: 100%; }
 .art-selection .art-assignment-kind { width: 100%; }
 .art-selectors .field { width: 0; }
 .art-kpis, .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .art-workspace .art-student-grid { grid-template-columns: minmax(0,1fr); }
 .art-workspace .art-student, .art-workspace .club-roster .art-student { height: auto; min-height: 108px; }
 .art-workspace .grade-buttons button { min-width: 40px; height: 40px; }
 .art-student .student-name { max-width: none; white-space: normal; }
 .art-workspace .club-roster, .art-club-member-list { overflow: visible; }
 .art-grid { grid-template-columns: minmax(0,1fr); }
 .manage-student { grid-template-columns: 40px minmax(0,1fr); padding-block: 8px; }
 .student-columns { display: none; }
 .student-actions { flex-wrap: wrap; }
 .art-workspace .assignment-card { min-height: 150px; }
 .assignment-actions { width: 100%; text-align: left; }
 .art-workspace .pagination { height: auto; flex-wrap: wrap; }
 .art-club-member { flex-wrap: wrap; padding-block: 8px; }
 .distribution-values { flex-wrap: wrap; }
 .art-detail, .art-profile { height: auto; min-height: 100%; }
 .art-detail > img { flex: none; max-height: 60dvh; }
 .art-profile-list article { height: auto; min-height: 64px; flex-wrap: wrap; }
 .it-stage .school-view, .it-stage .school-layout, .it-stage .school-main, .it-stage .scores-ui,
 .it-stage .it-schedule, .it-stage .room-view, .it-detail-content, .it-student-profile { height: auto; }
 .it-stage .school-layout { grid-template-rows: auto auto; }
 .it-stage .school-layout > aside { flex-wrap: wrap; }
 .it-stage .school-summary { max-width: 90px; }
 .it-stage .scores-students, .it-stage .schedule-cards, .it-stage .reports-filters, .it-student-profile { grid-template-columns: minmax(0,1fr); }
 .it-stage .schedule-today-page { height: auto; }
 .it-stage .school-content, .it-detail-content, .it-student-profile > .card { overflow: visible; }
 .it-stage .it-timeline > article { grid-template-columns: minmax(0,1fr); }
 .it-event-status { justify-self: start; }
 .it-event-body p { white-space: normal; }
 .it-stage .it-lesson-list > article { flex-wrap: wrap; }
 .it-stage .room-map { grid-template-columns: minmax(0,1fr); }
 .room-map-viewport { overflow: visible; }
 .it-row-action { opacity: 1; }
 .it-pager { flex-wrap: wrap; }
 .it-stage .reports-table, .it-stage .reports-table table, .it-stage .reports-table tbody { display: block; width: 100%; }
 .it-stage .reports-table thead { display: none; }
 .it-stage .reports-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; border-bottom: 1px solid var(--g6); }
 .it-stage .reports-table td { white-space: normal; }
 .it-stage .reports-table td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--g11); }
 .it-stage .table-scroll { overflow: visible; }
 #modal, .art-dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 24px); box-sizing: border-box; }
 #modal { padding: 16px; }
 .art-dialog .dialog-body { padding: 12px; }
 .art-dialog .dialog-footer, .art-dialog .info-box { flex-wrap: wrap; }
 .art-dialog .upload-preview, .art-dialog progress { max-width: 100%; overflow-wrap: anywhere; }
 .art-dialog .upload-preview img { max-width: 100%; max-height: 35dvh; }
 #toast { bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40; }
 .it-reminder { bottom: calc(72px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); }
}
@media print { .mobile-nav, .mobile-segments { display: none !important; } }