/* Screen-only overrides keep A4 print and export layouts unchanged. */
#mobileClassDetails > summary { display: none; }

@media screen and (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  .page { padding: 10px; }
  .app-shell, .workspace-stage, .workspace-view { min-width: 0; }
  .brand-hero { gap: 8px; }
  .brand-hero .header-account { gap: 8px; }
  .header-account .account-avatar-button { min-height: 44px; }
  .account-avatar-label { font-size: 13px; }
  #teacherSyncStatusButton { min-height: 44px; }

  #mobileClassDetails { min-width: 0; }
  #mobileClassDetails > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; gap: 8px; padding: 8px; cursor: pointer;
    font-size: 13px; font-weight: 650; list-style: none;
  }
  #mobileClassDetails > summary::-webkit-details-marker { display: none; }
  #mobileClassSummary { min-width: 0; overflow-wrap: anywhere; }
  .mobile-class-action { flex-shrink: 0; color: var(--accent); font-size: 12px; }
  #mobileClassDetails[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .sidebar-class-context-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sidebar-class-context-controls label:first-child { grid-column: 1 / -1; }
  .sidebar-class-context-controls select { min-height: 44px; font-size: 16px; }

  /* All ten sections are visible without sideways navigation. */
  #primaryNavigation {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row; grid-auto-columns: auto; gap: 4px;
    padding: 6px; overflow: visible;
  }
  #primaryNavigation .primary-nav-item {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; min-height: 52px; gap: 5px; padding: 6px 2px;
    font-size: 11px; line-height: 1.3; white-space: nowrap;
  }
  #primaryNavigation .primary-nav-item .ui-icon { width: 18px; height: 18px; }
  #primaryNavIndicator { display: none; }
  #primaryNavigation .primary-nav-item.is-active {
    color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    box-shadow: inset 0 -2px var(--accent);
  }
  .portal-workspace { min-height: 0; }
  .workspace-view button.compact { min-height: 44px; }
  .workspace-search { width: 100%; min-width: 0; }
  .workspace-search input { min-width: 0; min-height: 44px; font-size: 16px; }
  .home-student-directory-panel .home-student-directory-head { gap: 8px; }
  .student-directory-list { padding: 10px; }
  .student-directory-item { min-width: 0; }

  .student-cadre-toolbar, .student-hygiene-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "actions";
    gap: 10px; padding: 12px;
  }
  .student-cadre-toolbar-title, .student-hygiene-toolbar-title { min-width: 0; }
  .student-hygiene-heading { grid-area: title; min-width: 0; }
  .student-hygiene-toolbar-actions { grid-area: actions; }
  .student-cadre-toolbar-title h2, .student-hygiene-toolbar-title h2 {
    white-space: normal; overflow: visible; text-overflow: clip; font-size: 17px;
  }
  .student-cadre-toolbar-actions, .student-hygiene-toolbar-actions {
    justify-self: stretch; justify-content: flex-end; flex-wrap: wrap;
  }
  .student-cadre-toolbar-actions .workspace-head-action, .student-hygiene-toolbar-actions .workspace-head-action {
    width: auto; min-height: 44px;
  }
  .student-cadre-board { padding: 12px; }
  .student-cadre-role-grid { grid-template-columns: minmax(0, 1fr); }
  .student-cadre-role-card { min-width: 0; }
  .student-cadre-role-picker { grid-auto-rows: minmax(44px, auto); }
  .student-cadre-board button { min-height: 44px; }
  .student-hygiene-board { padding: 10px; min-width: 0; }
  .student-hygiene-grid-scroll, .board-panel, .grade-student-table-wrap {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  #hygieneWorkspace .student-hygiene-grid-scroll::before {
    content: "左右滑动查看完整卫生表"; display: block; padding: 8px; font-size: 12px; color: var(--muted);
  }
  .board-panel::before {
    content: "左右滑动查看完整座位表"; display: block; padding: 8px; font-size: 12px; color: var(--muted);
  }
  #seatWorkspace .function-bar { grid-template-areas: none; grid-template-columns: minmax(0, 1fr); }
  #seatWorkspace .seat-center-tools { grid-template-columns: minmax(0, 1fr); }
  #seatWorkspace .adjust-function { --adjust-grid-columns: 3; }
  #seatWorkspace .adjust-actions { grid-auto-rows: 44px; }
  #seatWorkspace .adjust-actions .compact { min-height: 44px; touch-action: manipulation; }
  #seatWorkspace .seat-command-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #seatWorkspace .workbench { grid-template-columns: minmax(0, 1fr); }
  #seatWorkspace .function-block { grid-area: auto; }
  .study-groups-toolbar { padding: 12px; gap: 12px; }
  .study-groups-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-group-board { grid-template-columns: minmax(0, 1fr); padding: 10px; }

  /* Let the document scroll; only student pickers retain a bounded list. */
  .assistant-student-rows, .growth-layout {
    height: auto; max-height: none; min-height: 0; overflow: visible;
    grid-template-columns: minmax(0, 1fr);
  }
  .assistant-comment-workbench .assistant-comment-editor {
    min-height: 0; height: auto; max-height: none; overflow: visible;
  }
  .assistant-roster-list, .growth-student-list {
    max-height: 190px; overflow-y: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .assistant-comment-config, .assistant-editor-footer { padding: 12px; }
  .assistant-comment-config > header { grid-template-columns: minmax(0, 1fr); }
  .assistant-export-actions { flex-wrap: wrap; gap: 8px; }
  .assistant-export-actions > span { flex: 1 1 100%; }
  .assistant-export-actions button { width: auto; flex: 1 1 0; min-width: 0; }
  .assistant-style-card-grid { grid-template-columns: minmax(0, 1fr); }
  .assistant-style-card textarea { font-size: 16px; }
  .growth-student-button { min-width: 0; }
  .growth-student-detail { padding: 12px; min-width: 0; }
  #gradeWorkspace .grade-dashboard, #gradeWorkspace .grade-student-analysis-layout {
    grid-template-columns: minmax(0, 1fr); min-width: 0;
  }
  #gradeWorkspace .grade-student-selector-panel { height: auto; max-height: 260px; }
  .settings-row p { overflow-wrap: anywhere; }
  .modal { padding: 10px; }
  .modal-panel { max-width: 100%; max-height: calc(100dvh - 20px); overflow-y: auto; }
  .student-selection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-popover { max-width: calc(100vw - 24px); }
}