/* Responsive density overrides loaded after portal-ui, ops-ui, and edu-theme.
   Keep touch targets usable while removing oversized empty space and collision-prone grids. */

/* Android WebView / WeChat compatibility. Keep controls visually deterministic
   while preserving 44px touch targets and user text scaling. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --rtweb-safe-area-bottom: 0px;
  --rtweb-viewport-height: 100vh;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  html { --rtweb-safe-area-bottom: env(safe-area-inset-bottom, 0px); }
}

@supports (height: 100dvh) {
  html { --rtweb-viewport-height: 100dvh; }
}

body.app-body button,
body.app-body input[type="button"],
body.app-body input[type="submit"],
body.app-body input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.25;
  touch-action: manipulation;
}

body.app-body .btn {
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.25;
  touch-action: manipulation;
}

body.app-body .app {
  min-height: var(--rtweb-viewport-height, 100vh);
}

body.app-body .topbar-primary,
body.app-body .topbar-user,
body.app-body .topbar-avatar-badge,
body.app-body .topbar-avatar-copy,
body.app-body .topbar-avatar-badge > div {
  min-width: 0;
}

body.app-body .topbar-avatar-badge {
  max-width: 100%;
  overflow: hidden;
}

body.app-body .topbar-avatar-badge > span:first-child,
body.app-body .topbar-avatar-icon {
  flex: 0 0 auto;
}

body.app-body .topbar-avatar-copy,
body.app-body .topbar-avatar-badge > div {
  max-width: 100%;
  overflow: hidden;
}

body.app-body .topbar-avatar-name,
body.app-body .topbar-avatar-badge > div > div:first-child,
body.app-body .topbar-avatar-badge > div > .muted {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.app-body .sidebar {
    bottom: auto;
    height: var(--rtweb-viewport-height, 100vh);
    max-height: var(--rtweb-viewport-height, 100vh);
  }

  body.app-body .main,
  body.app-body.role-owner .main,
  body.app-body.role-manager .main,
  body.app-body.role-teacher .main,
  body.app-body.role-student .main,
  body.app-body.role-parent .main {
    padding-bottom: calc(var(--role-mobile-nav-height) + 34px + var(--rtweb-safe-area-bottom));
  }

  body.app-body .role-mobile-nav {
    min-height: calc(var(--role-mobile-nav-height) + var(--rtweb-safe-area-bottom));
    padding-bottom: var(--rtweb-safe-area-bottom);
  }

  body.app-body.menu-workflow .workflow-action-bar,
  body.app-body .student-v0-submit-bar {
    bottom: calc(var(--role-mobile-nav-height) + var(--rtweb-safe-area-bottom));
  }

  body.app-body .student-v0-submit-bar {
    position: sticky;
    z-index: 5;
  }
}

html[data-layout-mode="mobile"] body.app-body .main,
html[data-layout-mode="mobile"] body.app-body.role-owner .main,
html[data-layout-mode="mobile"] body.app-body.role-manager .main,
html[data-layout-mode="mobile"] body.app-body.role-teacher .main,
html[data-layout-mode="mobile"] body.app-body.role-student .main,
html[data-layout-mode="mobile"] body.app-body.role-parent .main {
  padding-bottom: calc(var(--role-mobile-nav-height) + 34px + var(--rtweb-safe-area-bottom));
}

html[data-layout-mode="mobile"] body.app-body .role-mobile-nav {
  min-height: calc(var(--role-mobile-nav-height) + var(--rtweb-safe-area-bottom));
  padding-bottom: var(--rtweb-safe-area-bottom);
}

html[data-layout-mode="mobile"] body.app-body.menu-workflow .workflow-action-bar,
html[data-layout-mode="mobile"] body.app-body .student-v0-submit-bar {
  bottom: calc(var(--role-mobile-nav-height) + var(--rtweb-safe-area-bottom));
}

html[data-layout-mode="mobile"] body.app-body .student-v0-submit-bar {
  position: sticky;
  z-index: 5;
}

@media (max-width: 768px) {
  body.app-body .picker-modal-card {
    max-height: min(88vh, calc(var(--rtweb-viewport-height, 100vh) - 20px));
  }
}

html.rtweb-keyboard-open body.app-body .role-mobile-nav {
  display: none !important;
}

html.rtweb-keyboard-open body.app-body.menu-workflow .workflow-action-bar:not([hidden]) {
  display: grid !important;
  position: static !important;
  bottom: auto !important;
  z-index: auto;
}

html.rtweb-keyboard-open body.app-body.role-student .student-v0-submit-bar:not([hidden]) {
  display: flex !important;
  position: static !important;
  bottom: auto !important;
  z-index: auto;
}

html.rtweb-keyboard-open body.app-body .main,
html.rtweb-keyboard-open body.app-body.role-owner .main,
html.rtweb-keyboard-open body.app-body.role-manager .main,
html.rtweb-keyboard-open body.app-body.role-teacher .main,
html.rtweb-keyboard-open body.app-body.role-student .main,
html.rtweb-keyboard-open body.app-body.role-parent .main {
  padding-bottom: 18px;
}


body.app-body .card-header-row > *,
body.app-body .section-head > *,
body.app-body .workflow-panel-head > *,
body.app-body .workflow-header-row > *,
body.app-body .topbar-primary,
body.app-body .topbar-user,
body.app-body .topbar-actions,
body.app-body .form-grid > *,
body.app-body .filter-grid > *,
body.app-body .btn-row > * {
  min-width: 0;
}

body.app-body input,
body.app-body select,
body.app-body textarea {
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  body.app-body .topbar,
  body.app-body.role-owner .topbar,
  body.app-body.role-manager .topbar,
  body.app-body.role-teacher .topbar {
    min-height: 54px;
    margin-bottom: 14px;
    padding-block: 8px;
  }

  body.app-body .page-title {
    margin-bottom: 12px;
    font-size: 30px;
  }

  body.app-body.role-student .card,
  body.app-body.role-parent .card {
    margin-bottom: 10px;
    padding: 14px;
  }

  body.app-body .student-v0-app-shell {
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  body.app-body .student-v0-main-card,
  body.app-body .family-v0-main-card {
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 30px rgba(78, 102, 113, 0.09);
  }

  body.app-body .student-v0-main-card {
    min-height: 170px;
  }

  body.app-body .family-v0-main-card {
    min-height: 240px;
  }

  body.app-body .student-v0-app-card,
  body.app-body .family-v0-app-card {
    min-height: 150px;
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  body.app-body .student-v0-app-icon,
  body.app-body .family-v0-app-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-lg);
    font-size: 23px;
  }

  body.app-body .student-v0-list-shell,
  body.app-body .family-v0-feed-shell,
  body.app-body .student-v0-task-list-col {
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  body.app-body .student-v0-task-panel {
    padding: 18px;
    border-radius: var(--radius-lg);
  }

  body.app-body .teacher-v0-hero,
  body.app-body .family-v0-lesson-hero,
  body.app-body .teacher-homework-hero,
  body.app-body .resource-desk-hero {
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  body.app-body .teacher-v0-focus-card,
  body.app-body .teacher-v0-tool-card {
    min-height: 116px;
    padding: 14px;
    border-radius: var(--radius-lg);
  }

  body.app-body .teacher-homework-panel,
  body.app-body .resource-workspace,
  body.app-body .resource-work-panel {
    padding: 14px;
    border-radius: var(--radius-lg);
  }

  body.app-body .family-v0-family-today-card {
    min-height: 220px;
  }
}

@media (max-width: 900px) {
  body.app-body {
    overflow-x: clip;
  }

  body.app-body .topbar-identity {
    min-width: 0;
    max-width: min(52vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-body button,
  body.app-body .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  body.app-body .workflow-title,
  body.app-body .workflow-panel-head h4,
  body.app-body .teacher-v0-tool-card strong,
  body.app-body .resource-desk-nav-card strong,
  body.app-body .student-v0-task-copy strong,
  body.app-body .family-v0-feed-copy strong {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 540px) {
  body.app-body .wf-ops-actions,
  body.app-body.menu-dashboard.role-teacher .hero-panel .stat-grid,
  body.app-body.menu-dashboard.role-teacher .card .stat-grid,
  body.app-body.menu-dashboard.role-teacher .quick-action-grid,
  body.app-body.menu-reading_modules .reader-product-metrics,
  body.app-body.role-parent .family-report-hero .family-app-grid,
  body.app-body.menu-resources .resource-kpi-grid,
  body.app-body.menu-masterdata .page-title + .card .filter-row,
  body.app-body .workflow-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-body.menu-schedule.role-student .student-lesson-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-body .student-v0-app-shell .student-v0-app-card,
  body.app-body .family-v0-side-stack .family-v0-app-card {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon badge";
    gap: 4px 9px;
    min-height: 72px;
    padding: 10px;
  }

  body.app-body .student-v0-app-shell .student-v0-app-icon,
  body.app-body .family-v0-side-stack .family-v0-app-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    font-size: 18px;
  }

  body.app-body .student-v0-app-shell .student-v0-app-copy,
  body.app-body .family-v0-side-stack .family-v0-app-copy {
    display: none;
  }

  body.app-body .student-v0-app-shell .student-v0-app-badge,
  body.app-body .family-v0-side-stack .family-v0-app-badge {
    justify-self: start;
    align-self: start;
    max-width: 100%;
    min-height: 22px;
    padding: 0 7px;
    font-size: 9px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.app-body .teacher-v0-tool-grid,
  body.app-body .resource-desk-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-body.role-student .student-v0-task-panel textarea,
  body.app-body.menu-workflow .workflow-meta-form textarea[name="lesson_summary"] {
    min-height: 120px;
  }

  body.app-body .wf-ops-actions .btn,
  body.app-body.menu-dashboard.role-teacher .quick-action,
  body.app-body.menu-schedule .lesson-actions .btn,
  body.app-body.menu-schedule .student-lesson-actions .btn,
  body.app-body.menu-masterdata .page-title + .card .filter-row > * {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  body.app-body .teacher-v0-tool-grid,
  body.app-body .resource-desk-nav,
  body.app-body.menu-masterdata .page-title + .card .filter-row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Immediate UI safety fixes: solve component overflow instead of clipping the page. */

/* A 44px tap floor applied to every pointer type made the topbar language
   field 46px tall and pushed its icon off the select's baseline on desktop.
   The floor now applies only where a finger is the pointer. */
@media (pointer: coarse) {
  body.app-body .topbar-mini-field,
  body.app-body .topbar-mini-field select,
  body.app-body .topbar-more-summary,
  body.app-body .topbar-mobile-language select,
  body.app-body .layout-mode-option {
    min-height: 44px !important;
  }
}

body.app-body .drive-tabs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body.app-body .drive-tab-item {
  flex: 0 0 auto;
  min-height: 44px;
  scroll-snap-align: start;
}

body.app-body .drive-card-bottom {
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
}

body.app-body .drive-badge,
body.app-body .drive-card-info,
body.app-body .drive-card-name,
body.app-body .drive-card-sub,
body.app-body .family-pocket-copy,
body.app-body .notice-feed-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (pointer: coarse) {
  body.app-body .drive-quick-card .btn,
  body.app-body .storage-tree-row,
  body.app-body .storage-command-button,
  body.app-body .storage-view-button,
  body.app-body .storage-more-button {
    min-height: 44px !important;
  }

  body.app-body .storage-view-button,
  body.app-body .storage-more-button {
    width: 44px !important;
    min-width: 44px !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  body.app-body.role-parent .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.app-body.role-parent .family-card,
  body.app-body.role-parent .family-card-header,
  body.app-body.role-parent .family-card-header > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  body.app-body {
    overflow-x: visible;
  }

  /* Narrow does not mean touch: a resized desktop window kept desktop-sized
     pointers while every button grew to 44px. */
  @media (pointer: coarse) {
    body.app-body button,
    body.app-body .btn,
    body.app-body .family-optional-card > summary {
      min-height: 44px !important;
    }
  }

  /* The students roster mobile layout is owned by workspace-ui.css. The grid
     card that used to live here (2 columns, visible ::before labels, full-width
     action button) is what expanded a one-line row to 222px. */

  body.app-body.menu-announcements .family-pocket-card,
  body.app-body.menu-announcements .notice-feed-card {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  body.app-body.role-parent .family-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  body.app-body.role-parent .family-inline-note {
    width: 100%;
  }
}

@media (max-width: 360px) {
  /* roster layout owned by workspace-ui.css */
}