/* NewGen mobile layer
   Loaded last and scoped to phone/tablet widths so desktop remains untouched. */

@media (max-width: 820px) {
  body.notes-view-active .main { padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important; }
  html {
    width: 100%;
    overflow-x: hidden;
    scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body {
    width: 100%;
    min-width: 320px;
    padding-bottom: 0;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
  }

  button,
  .primary-btn,
  .ghost-btn,
  .pill-btn,
  .icon-btn,
  .import-label {
    min-height: 44px;
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    min-height: 46px;
    font-size: 16px;
  }

  .app-shell {
    display: block;
    width: 100%;
    min-height: 100dvh;
    overflow: visible;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 70;
    width: 100%;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    display: block;
    border: 0;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 -10px 30px rgba(20, 35, 60, .11);
    backdrop-filter: blur(16px);
  }

  .sidebar > .brand,
  .sidebar > .level-card {
    display: none;
  }

  .nav {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .nav::-webkit-scrollbar { display: none; }

  .nav-item {
    min-width: 52px;
    min-height: 54px;
    padding: 5px 6px;
    flex: 1 0 52px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    scroll-snap-align: center;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1;
  }

  .nav-item .nav-icon { width: 20px; height: 20px; }
  .nav-item:hover { transform: none; }
  .nav-item.active::after { display: none; }

  .main {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    padding: 12px 12px calc(90px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .topbar {
    position: static;
    min-height: 0;
    margin: 0 0 12px;
    padding: 2px 0 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }

  .topbar > div:first-child {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .topbar h1 {
    margin: 0;
    overflow: hidden;
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: -1;
  }

  .topbar .eyebrow {
    display: block;
    flex: 0 0 auto;
    font-size: 9px;
  }

  .top-actions {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  .top-actions .search-box {
    position: static;
    inset: auto;
    order: initial;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .top-actions #quickAddToggle,
  .top-actions #focusModeBtn,
  .top-actions #smartPickBtn {
    width: 100%;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: span 2;
    font-size: 11px;
  }

  .top-actions #quickAddToggle::after,
  .top-actions #focusModeBtn::after { display: none; }

  .top-actions #cloudStatusBtn {
    width: 100%;
    padding: 0 8px 0 25px !important;
    grid-column: span 2;
    color: var(--muted-strong);
    font-size: 11px;
  }

  .top-actions #themeToggle {
    width: 100%;
    grid-column: span 1;
  }

  .top-actions .mini-profile {
    min-width: 0;
    min-height: 44px;
    padding: 4px 8px 4px 4px;
    grid-column: span 3;
  }

  .top-actions .mini-profile span {
    display: block;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cloud-status::before { left: 11px; }

  .view.active,
  #dashboardView.view.active {
    min-width: 0;
    overflow: visible;
  }

  .panel {
    min-width: 0;
    margin-bottom: 10px;
    padding: 14px;
    overflow: visible;
    border-radius: 14px;
  }

  .panel-head,
  .settings-head,
  .reward-level-head,
  .reward-section-title {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .panel-head > *,
  .settings-head > * { min-width: 0; }

  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .hero-panel {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 16px;
    display: grid;
    gap: 13px;
    border-radius: 15px;
  }

  .hero-panel h2 { font-size: clamp(24px, 7.5vw, 31px); }
  .hero-panel .primary-btn { width: 100%; }

  .metric-card {
    min-width: 0;
    min-height: 105px;
    padding: 11px;
    border-radius: 13px;
  }

  .metric-card > span { font-size: 9px; line-height: 1.25; }
  .metric-card strong { font-size: 27px; }
  .metric-card small { font-size: 9px; line-height: 1.25; }

  .dashboard-tabs,
  #taskFilter {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .dashboard-tabs::-webkit-scrollbar,
  #taskFilter::-webkit-scrollbar { display: none; }
  .dashboard-tabs button,
  #taskFilter button { flex: 1 0 auto; min-height: 36px; }

  .content-grid,
  .content-grid.two,
  .content-grid.two.dashboard-section.active,
  .command-grid,
  .split-layout,
  .social-workspace,
  .reward-workspace {
    grid-template-columns: 1fr;
  }

  .form-panel { position: static; max-height: none; }
  .form-row { align-items: stretch; flex-direction: column; }
  .toolbar-row { align-items: stretch; flex-direction: column; }
  .search-box.wide { width: 100%; }

  .quick-add-panel {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    width: 100%;
    height: min(88dvh, 760px);
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    transform: translateY(105%);
  }

  .quick-add-panel.open { transform: translateY(0); }
  .quick-add-head { position: sticky; top: -18px; z-index: 2; padding: 18px 0 12px; background: var(--surface); }
  .quick-add-head h2 { font-size: 20px; }

  .task-form {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .task-form > *, .task-form input[name="title"], .task-form select[name="subjectId"], .task-form select[name="type"], .task-form input[name="dueDate"], .task-form input[name="effort"], .task-form input[name="gradeCount"], .task-form select[name="priority"], .task-test-toggle, .task-form > .primary-btn { grid-column: 1 / -1; }

  .task-form > :first-child { grid-column: auto; }
  .task-form input[name="effort"],
  .task-form select[name="priority"] { display: block; }

  .task-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    overflow: visible;
  }

  .board-column { min-height: 0; }
  .task-list.spacious { max-height: none; overflow: visible; }
  .task-card { grid-template-columns: 6px minmax(0, 1fr); gap: 9px; }
  .task-main strong { white-space: normal; overflow-wrap: anywhere; }
  .task-actions { grid-column: 2; justify-content: flex-end; }
  .round-action { width: 38px; height: 38px; }

  .subject-grid,
  .friends-grid,
  .stats-grid { grid-template-columns: 1fr; }
  .subject-detail-grid { grid-template-columns: 1fr; }

  .grade-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .grade-row > :last-child { grid-column: 1 / -1; }

  .calendar-strip {
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    margin-inline: -4px;
    padding: 0 4px 5px;
    scroll-snap-type: x proximity;
  }

  .calendar-strip > * { scroll-snap-align: start; }

  .week-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
  }

  .day-column { min-height: 0; }

  .social-chat-panel { grid-column: auto; }
  .social-column { overflow: visible; }
  .chat-box { min-height: 330px; max-height: 60dvh; }
  .chat-message { max-width: 90%; overflow-wrap: anywhere; }
  .friend-actions,
  .relationship-actions { flex-wrap: wrap; }
  .friend-actions > *,
  .relationship-actions > * { flex: 1 1 auto; }
  .friend-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .friend-actions > .compact-friend-action { min-width: 0; padding-inline: 7px; }

  .reward-main,
  .reward-side { padding: 12px; }
  .reward-side { display: grid; grid-template-columns: 1fr; }
  .reward-level-track { grid-auto-columns: minmax(145px, 72%); }
  .reward-mission { grid-template-columns: 52px minmax(0, 1fr); }
  .reward-mission-action { grid-column: 2; }

  #profileView .profile-workspace,
  #profileView .profile-content { grid-template-columns: 1fr; }
  #profileView .profile-overview { position: static; }
  #profileView .profile-content > * { grid-column: 1 / -1; }

  .settings-form-grid { grid-template-columns: 1fr; }
  .settings-span { grid-column: auto; }
  .settings-save-row { align-items: stretch; flex-direction: column; }
  .settings-save-row .primary-btn { width: 100%; }
  .data-tools > * { flex: 1 1 100%; justify-content: center; }

  .auth-overlay,
  .setup-overlay,
  .focus-overlay,
  .profile-preview-overlay {
    padding: 0;
    place-items: end center;
  }

  .confirm-overlay {
    padding: 0;
    place-items: end center;
  }

  .auth-card,
  .setup-card,
  .focus-card,
  .profile-preview-card {
    width: 100%;
    max-height: 92dvh;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
  }

  .confirm-card {
    width: 100%;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
  }

  .confirm-actions > * { flex: 1 1 0; }

  .focus-timer { font-size: clamp(60px, 20vw, 82px); }
  .focus-controls > * { flex: 1 1 100%; }

  .tour-card {
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: calc(100% - 20px);
    max-height: calc(100dvh - 100px);
    overflow: auto;
  }

  .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }

  .landing-page {
    min-height: 100dvh;
    padding: 16px 14px 26px;
    gap: 34px;
  }

  .landing-hero { grid-template-columns: 1fr; gap: 30px; }
  .landing-copy { text-align: center; }
  .landing-copy h1 { font-size: clamp(39px, 12.5vw, 58px); }
  .landing-copy > p,
  .landing-copy h1 { margin-inline: auto; }
  .landing-copy .landing-actions { justify-content: center; }
  .landing-copy .landing-actions > * { flex: 1 1 145px; }
  .landing-preview { width: 100%; transform: none; }
  .landing-features { grid-template-columns: 1fr; }

  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-workspace { grid-template-columns: 1fr; }
  .admin-user-row { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-user-counts { grid-column: 1 / -1; }
  .admin-user-state { grid-column: 2; grid-row: 1; }
  .admin-user-overlay { padding: 0; place-items: end center; }
  .admin-user-card { width: 100%; max-height: 92dvh; overflow: auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .admin-detail-actions > * { flex: 1 1 100%; }
  .assessment-overlay { padding: 0; place-items: end center; }
  .assessment-card { width: 100%; max-height: 92dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  .assessment-fields { grid-template-columns: 1fr; }
  .assessment-actions > * { flex: 1; }
  .admin-audit-item { grid-template-columns: 1fr; }
  .admin-audit-side { display: flex; align-items: center; justify-content: space-between; }
}

/* Resolution-safe workspace layouts. This file is loaded last intentionally. */
#subjectsView .subject-grid {
  display: flex;
  grid-template-columns: none;
  width: 100%;
  min-width: 0;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 3px 14px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

#subjectsView .subject-card {
  flex: 0 0 clamp(230px, 30vw, 330px);
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
}

#tasksView.view.active,
#gradesView.view.active,
#adminView.view.active {
  height: auto;
  min-height: calc(100dvh - 104px);
  overflow: visible;
}

#tasksView > .panel {
  height: auto;
  min-height: 0;
  overflow: visible;
}

#tasksView .task-board {
  flex: none;
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

#tasksView .task-list.spacious {
  flex: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  padding: 16px 0 0;
}

#tasksView .task-list.spacious > .task-section {
  min-width: 0;
  align-content: start;
}

#tasksView .task-list.spacious > .task-section + .task-section {
  margin: 0;
  padding: 0 0 0 18px;
  border-top: 0;
  border-left: 1px solid var(--line);
}

@media (min-width: 1200px) {
  #socialView .social-column:nth-child(2) .social-friends-list,
  #socialView .social-column:nth-child(2) .group-chat-list {
    flex: 1 1 0;
    min-height: 150px;
    max-height: none;
  }

  #socialView .social-column:nth-child(2) .group-chat-list {
    margin-top: 2px;
  }
}

/* Authoritative adaptive workspaces for compact and short screens. */
#tasksView .task-list.spacious {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: clamp(8px, 1.4vw, 16px) !important;
  overflow: visible !important;
}

#tasksView .task-section {
  height: clamp(240px, 43dvh, 500px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(10px, 1.4vw, 14px) !important;
  overflow: hidden;
}

#tasksView .task-section > .task-list {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#tasksView .task-card {
  padding: clamp(9px, 1.2vw, 14px);
  gap: clamp(7px, 1vw, 12px);
}

#gradesView .grades-workspace {
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr) !important;
  grid-template-areas: "grades side" "tasks tasks" !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  overflow: visible !important;
}

#gradesView .grades-list-panel {
  grid-area: grades;
  height: clamp(300px, 48dvh, 560px) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
}

#gradesView .grades-table {
  height: 100%;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
}

#gradesView .grades-side-stack {
  grid-area: side;
  position: static !important;
  height: clamp(300px, 48dvh, 560px);
  max-height: none !important;
  overflow: hidden !important;
}

#gradesView .grades-side-stack > .panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#gradesView .planner-list {
  height: 100%;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
}

#gradesView .grade-task-overview {
  grid-area: tasks;
  min-height: 0;
  overflow: hidden;
}

#gradesView .grade-task-sections {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.4vw, 16px);
}

#gradesView .grade-task-sections .task-section {
  height: clamp(240px, 40dvh, 480px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#gradesView .grade-task-sections .task-list {
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

@media (max-width: 760px) {
  #tasksView .task-list.spacious,
  #gradesView .grade-task-sections {
    grid-template-columns: 1fr !important;
  }

  #gradesView .grades-workspace {
    grid-template-columns: 1fr !important;
    grid-template-areas: "grades" "side" "tasks" !important;
  }

  #gradesView .grades-list-panel,
  #gradesView .grades-side-stack {
    height: min(54dvh, 520px) !important;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  #tasksView .task-section,
  #gradesView .grade-task-sections .task-section {
    height: max(210px, 38dvh);
  }

  #gradesView .grades-list-panel,
  #gradesView .grades-side-stack {
    height: max(260px, 44dvh) !important;
  }
}

/* Show at least two task cards before scrolling. */
#tasksView .task-section {
  height: clamp(350px, 54dvh, 600px) !important;
}

#tasksView .task-section > .task-list .task-card {
  padding: 9px 10px;
  gap: 8px;
}

#tasksView .task-section > .task-list .task-main {
  gap: 3px;
}

#tasksView .task-section > .task-list .task-meta {
  gap: 3px 8px;
  font-size: 11px;
}

#tasksView .task-section > .task-list .round-action {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
}

@media (max-height: 700px) and (min-width: 761px) {
  #tasksView .task-section {
    height: max(330px, 52dvh) !important;
  }
}

@media (max-width: 760px) {
  #tasksView .task-section {
    height: min(58dvh, 520px) !important;
    min-height: 350px !important;
  }
}

/* Independent scroll surfaces for growing collections. */
:where(
  .board-stack,
  #tasksView .task-section > .task-list,
  #gradesView .grade-task-sections .task-list,
  #gradesView .grades-table,
  #gradesView .planner-list,
  #subjectsView .subject-detail .task-list,
  #socialView .search-results,
  #socialView .relationship-list,
  #socialView .social-friends-list,
  #socialView .group-chat-list,
  #adminView .admin-list,
  #adminView .admin-live-list,
  #adminView .admin-ticket-list,
  #adminView .admin-trash-list,
  #adminView .admin-announcement-list,
  #adminView .admin-audit-list,
  #dashboardView .task-list,
  #dashboardView .subject-progress-list,
  #dashboardView .focus-timeline,
  #dashboardView .risk-list,
  #dashboardView .activity-list,
  #dashboardView .insight-list,
  #dashboardView .reward-mission-list
) {
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-right: 5px;
}

.board-column,
#tasksView .task-section,
#gradesView .grade-task-sections .task-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}

#tasksView .task-section,
#gradesView .grade-task-sections .task-section {
  padding: 14px !important;
  margin: 0 !important;
}

#tasksView .task-section + .task-section,
#gradesView .grade-task-sections .task-section + .task-section {
  border: 1px solid var(--line) !important;
}

.board-stack {
  max-height: clamp(240px, 36dvh, 480px);
}

#tasksView .task-section > .task-list,
#gradesView .grade-task-sections .task-list {
  max-height: clamp(300px, 48dvh, 640px) !important;
}

#gradesView .grades-table,
#gradesView .planner-list {
  max-height: clamp(320px, 55dvh, 680px);
}

#subjectsView .subject-detail .task-list {
  max-height: clamp(220px, 35dvh, 420px);
}

#socialView .search-results,
#socialView .relationship-list {
  max-height: clamp(180px, 28dvh, 340px) !important;
}

#socialView .social-friends-list,
#socialView .group-chat-list {
  flex: 1 1 0 !important;
  min-height: 180px !important;
  max-height: clamp(220px, 38dvh, 480px) !important;
}

#dashboardView :where(
  .task-list,
  .subject-progress-list,
  .focus-timeline,
  .risk-list,
  .activity-list,
  .insight-list,
  .reward-mission-list
) {
  max-height: clamp(260px, 42dvh, 520px) !important;
}

#adminView :where(
  .admin-list,
  .admin-live-list,
  .admin-ticket-list,
  .admin-trash-list,
  .admin-announcement-list,
  .admin-audit-list
) {
  max-height: clamp(280px, 48dvh, 620px) !important;
}

@media (max-width: 820px) {
  .board-stack {
    max-height: min(48dvh, 420px);
  }

  #tasksView .task-section > .task-list,
  #gradesView .grade-task-sections .task-list {
    max-height: min(58dvh, 520px) !important;
  }

  #socialView .social-friends-list,
  #socialView .group-chat-list {
    flex: none !important;
    min-height: 170px !important;
    max-height: min(46dvh, 420px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 1450px) and (min-width: 821px) {
  #socialView.view.active {
    height: auto;
    min-height: calc(100dvh - 104px);
    overflow: visible;
  }

  #socialView .social-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    align-items: start;
    overflow: visible;
  }

  #socialView .social-column {
    min-height: 440px;
    max-height: none;
    overflow: visible;
  }

  #socialView .social-chat-panel {
    grid-column: 1 / -1;
    min-height: 560px;
  }

  #socialView .social-column:nth-child(2) .social-friends-list,
  #socialView .social-column:nth-child(2) .group-chat-list {
    flex: 1 1 0;
    min-height: 180px;
    max-height: 360px;
  }

  #adminView .admin-metrics {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    overflow: visible;
  }

  #adminView .admin-operations-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    overflow: visible;
  }

  #adminView .admin-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  #tasksView .task-list.spacious {
    grid-template-columns: 1fr;
  }

  #tasksView .task-list.spacious > .task-section + .task-section {
    margin-top: 14px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 820px) {
  #subjectsView .subject-card {
    flex-basis: min(82vw, 310px);
  }

  #tasksView .task-list.spacious {
    display: grid;
    overflow: visible;
  }

  #socialView .social-workspace,
  #socialView .social-column,
  #socialView .social-chat-panel {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  #socialView .social-column:nth-child(2) .social-friends-list,
  #socialView .social-column:nth-child(2) .group-chat-list {
    min-height: 150px;
    max-height: none;
  }

  #adminView .admin-operations-grid,
  #adminView .admin-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .main { padding-inline: 9px; }
  .top-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .top-actions #quickAddToggle,
  .top-actions #focusModeBtn,
  .top-actions #smartPickBtn,
  .top-actions #cloudStatusBtn { grid-column: span 2; }
  .top-actions #themeToggle { grid-column: span 1; }
  .top-actions .mini-profile { grid-column: span 3; }
  .dashboard-grid { gap: 5px; }
  .metric-card { padding: 9px; }
  .metric-card strong { font-size: 24px; }
  #profileView .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 520px) and (pointer: coarse) {
  .sidebar { height: 58px; padding-block: 4px; }
  .nav-item { min-height: 48px; flex-direction: row; font-size: 9px; }
  .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .quick-add-panel { height: 96dvh; }
}

/* Mobile stability pass: this block intentionally wins over legacy workspace rules. */
@media (max-width: 820px) {
  html,
  body {
    min-height: 100%;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body:has(.auth-overlay.open),
  body:has(.setup-overlay.open),
  body:has(.focus-overlay.open),
  body:has(.confirm-overlay.open),
  body:has(.profile-preview-overlay.open),
  body:has(.admin-user-overlay.open),
  body:has(.assessment-overlay.open),
  body:has(.command-palette-overlay.open) {
    overflow: hidden !important;
  }

  .app-shell,
  .main {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .main {
    display: block;
  }

  .view,
  .view.active,
  #dashboardView.view.active,
  #tasksView > .panel,
  #calendarView > .panel,
  #socialView > .panel {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .view:not(.active) { display: none !important; }

  .dashboard-section.active,
  .dashboard-section.active .panel {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  .dashboard-section.active .task-list,
  .dashboard-section.active .subject-progress-list,
  .dashboard-section.active .focus-timeline,
  .dashboard-section.active .risk-list,
  .dashboard-section.active .load-bars,
  .dashboard-section.active .activity-list,
  .dashboard-section.active .insight-list,
  .dashboard-section.active .badges,
  .admin-live-list,
  .admin-ticket-list,
  .admin-trash-list {
    max-height: none;
    overflow: visible;
  }

  .panel,
  .hero-panel,
  .metric-card,
  .subject-card,
  .task-card,
  .friend-card,
  .admin-user-row,
  .admin-ticket,
  .admin-trash-row {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .content-grid,
  .content-grid.two,
  .grades-overview-grid,
  .split-layout,
  .profile-layout,
  .social-workspace,
  .admin-workspace,
  .admin-operations-grid,
  .reward-workspace {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
  }

  .form-panel,
  #gradesView .content-grid.two > .panel:first-child,
  #socialView .content-grid.two > .panel:first-child,
  #profileView .profile-panel {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .toolbar-row > *,
  .form-row > *,
  .admin-head-actions,
  .admin-head-actions > *,
  .chat-toolbar > *,
  .data-tools > * {
    min-width: 0;
  }

  .segmented { max-width: 100%; }

  .subject-card-head,
  .admin-user-head,
  .profile-preview-head {
    min-width: 0;
  }

  .subject-card-actions { flex: 0 0 auto; }
  .subject-detail { overflow: hidden; }
  .subject-detail-grid { grid-template-columns: 1fr 1fr; }

  .task-section + .task-section { margin-top: 14px; padding-top: 14px; }
  .task-actions { flex-wrap: wrap; }
  .task-actions .round-action { flex: 0 0 40px; }
  .task-test-toggle { min-height: 46px; }

  .calendar-strip {
    width: calc(100% + 8px);
    max-width: calc(100% + 8px);
    overflow-x: auto !important;
  }

  .week-grid { width: 100%; }
  .day-column { min-height: 0 !important; }
  .calendar-controls { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .calendar-controls select { grid-column: 1 / -1; width: 100%; }
  #gradesView .grades-workspace { grid-template-columns: 1fr; }
  #gradesView .grades-list-panel { position: static; max-height: none; overflow: visible; }

  .social-workspace { display: grid; gap: 10px; }
  .social-column { min-width: 0; height: auto !important; }
  .social-chat-panel { scroll-margin-top: 10px; }
  .friends-grid.social-friends-list { display: grid; grid-template-columns: 1fr; }
  .group-create-form .form-row { display: flex; flex-direction: row; }
  .group-create-form .form-row > * { flex: 1; }
  .chat-toolbar { justify-content: stretch; }
  .chat-toolbar > button { flex: 1 1 150px; }
  .chat-box { height: min(54dvh, 520px); min-height: 300px; max-height: none; }
  .chat-form { position: sticky; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 3; padding-top: 8px; background: var(--surface); }

  .profile-content,
  .profile-workspace { width: 100%; min-width: 0; }
  #profileView .profile-overview { width: 100%; }
  #profileView .settings-toggles label { min-width: 0; }
  .support-ticket-form { display: grid; grid-template-columns: 1fr; }
  .support-ticket-form label:nth-child(3) { grid-column: auto; }

  .admin-metrics,
  .admin-operations-grid,
  .admin-workspace,
  .admin-side-stack { min-width: 0; }
  .admin-users-panel,
  .admin-compose-panel { width: 100%; }
  .admin-search { min-width: 0; }
  .admin-audit-item { align-items: stretch; }
  .admin-audit-side { flex-wrap: wrap; gap: 8px; }
  #adminAuditFilter { width: 100%; }

  .auth-overlay,
  .setup-overlay,
  .focus-overlay,
  .profile-preview-overlay,
  .confirm-overlay,
  .admin-user-overlay,
  .assessment-overlay,
  .command-palette-overlay {
    width: 100%;
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) 0 0 !important;
    align-items: end;
    overflow: hidden;
  }

  .auth-card,
  .setup-card,
  .focus-card,
  .profile-preview-card,
  .confirm-card,
  .admin-user-card,
  .assessment-card,
  .command-palette-card {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top))) !important;
    margin: 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-width: 1px 0 0 !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .confirm-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); }
  .command-palette-overlay { place-items: end center; }
  .command-palette-list { max-height: min(55dvh, 420px); }
  .command-palette-item { min-height: 50px; }
  .admin-user-head { padding-right: 42px; }
  .admin-detail-meta,
  #adminDetailMeta { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  html { scroll-padding-bottom: calc(126px + env(safe-area-inset-bottom)); }

  .sidebar {
    height: calc(112px + env(safe-area-inset-bottom));
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 48px;
    gap: 3px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .nav-item {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 4px 2px;
    flex: none;
    font-size: 9px;
  }

  .nav-item .nav-icon { width: 18px; height: 18px; }

  .main {
    padding: 9px 9px calc(128px + env(safe-area-inset-bottom));
  }

  .topbar { margin-bottom: 9px; padding-bottom: 9px; }
  .topbar > div:first-child { align-items: center; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 23px; }

  .top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .top-actions .search-box { grid-column: 1 / -1; }
  .top-actions #quickAddToggle,
  .top-actions #focusModeBtn,
  .top-actions #smartPickBtn {
    grid-column: span 1;
    padding-inline: 4px;
    font-size: 9px;
  }
  .top-actions #cloudStatusBtn { grid-column: span 2; }
  .top-actions #themeToggle { grid-column: span 1; }
  .top-actions .mini-profile { display: none; }

  .panel { margin-bottom: 8px; padding: 12px; border-radius: 13px; }
  .panel-head { margin-bottom: 9px; }
  .panel h3 { font-size: 16px; }

  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hero-panel { grid-column: 1 / -1; padding: 14px; }
  .hero-panel h2 { font-size: 24px; }
  .metric-card { min-height: 94px; }
  .metric-card:last-child { grid-column: 1 / -1; min-height: 82px; }
  .metric-card strong { font-size: 25px; }
  .dashboard-tabs { flex-wrap: nowrap; }
  .dashboard-tabs button { flex: 0 0 auto; padding-inline: 12px; }

  .subject-detail-grid { grid-template-columns: 1fr; }
  .subject-card-head { align-items: flex-start; }
  .color-row { justify-content: space-between; }
  .swatch { width: 42px; height: 42px; }

  .task-board {
    display: flex;
    width: calc(100% + 4px);
    grid-template-columns: none;
    gap: 8px;
    padding: 0 4px 8px 0;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
  }
  .board-column { min-width: min(82vw, 310px); scroll-snap-align: start; }
  .task-card { grid-template-columns: 6px minmax(0, 1fr); padding: 10px; }
  .task-actions { grid-column: 2; justify-content: flex-start; }
  .task-actions .round-action { flex-basis: 42px; }
  .task-section-head { align-items: center; }

  .grade-row { grid-template-columns: 1fr; gap: 7px; }
  .grade-row > * { grid-column: 1 !important; }

  .calendar-strip { grid-template-columns: repeat(7, minmax(76px, 1fr)); }
  .week-grid { grid-template-columns: 1fr; }

  .friend-actions,
  .relationship-actions,
  .chat-toolbar,
  .admin-detail-actions,
  .assessment-actions,
  .confirm-actions,
  .focus-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .friend-actions > *,
  .relationship-actions > *,
  .chat-toolbar > *,
  .admin-detail-actions > *,
  .assessment-actions > *,
  .confirm-actions > *,
  .focus-controls > * { width: 100%; min-width: 0; }
  .friend-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .friend-actions > .compact-friend-action { width: 100%; min-width: 0; padding-inline: 6px; }
  .chat-box { height: 48dvh; min-height: 280px; padding: 9px; }
  .chat-message { max-width: 92%; }
  .chat-form { bottom: calc(116px + env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) auto; }
  .chat-form button { padding-inline: 11px; }
  .group-create-form .form-row { display: grid; grid-template-columns: 1fr 1fr; }

  #profileView .profile-overview-head { grid-template-columns: 58px minmax(0, 1fr); }
  #profileView .profile-avatar { width: 58px; height: 58px; }
  #profileView .profile-stats { grid-template-columns: 1fr 1fr; }
  #profileView .settings-toggles label { align-items: flex-start; }
  .data-tools { display: grid; grid-template-columns: 1fr; }

  .admin-metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
  .admin-metric { min-height: 100px; padding: 10px; }
  .admin-metric strong { font-size: 25px; }
  .admin-operations-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .admin-user-row { grid-template-columns: 1fr; gap: 8px; }
  .admin-user-state,
  .admin-user-counts { grid-column: 1; grid-row: auto; }
  .admin-user-counts { display: flex; flex-wrap: wrap; }
  .admin-head-actions { width: 100%; justify-content: space-between; }
  .admin-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-head-actions .soft-badge { grid-column: 1 / -1; justify-self: start; }
  .admin-ticket,
  .admin-trash-row { width: 100%; }
  .admin-ticket > button,
  .admin-trash-row > button { width: 100%; }
  .admin-detail-stats { grid-template-columns: 1fr 1fr; }
  .admin-user-head { align-items: flex-start; }
  .admin-user-head img { width: 56px; height: 56px; }
  .admin-detail-actions.account-actions { grid-template-columns: 1fr; }

  .landing-nav { align-items: flex-start; gap: 10px; }
  .landing-nav .brand span { display: none; }
  .landing-nav .landing-actions { gap: 5px; }
  .landing-nav .landing-actions button { min-height: 40px; padding-inline: 9px; font-size: 11px; }
  .landing-copy h1 { font-size: clamp(36px, 12vw, 48px); }

  .reward-summary { grid-template-columns: 1fr 1fr; }
  .reward-level-track { grid-auto-columns: minmax(140px, 82%); }
  .reward-mission { grid-template-columns: 46px minmax(0, 1fr); }

  .toast { bottom: calc(120px + env(safe-area-inset-bottom)); }
  .tour-card { bottom: calc(120px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 145px); }

  #genaiView.view.active { height: calc(100dvh - 152px - env(safe-area-inset-bottom)); overflow: hidden !important; }
  .ai-workspace { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: 1fr; gap: 8px; overflow: hidden; }
  .ai-sidebar { max-height: none; overflow: hidden; }
  .ai-sidebar .panel-head { flex-wrap: nowrap; align-items: center; }
  .ai-chat-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .ai-chat-row { min-width: min(72vw, 250px); flex: 0 0 auto; }
  .ai-chat-panel { min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
  .ai-chat-head h2 { font-size: 19px; }
  .ai-chat-head { align-items: flex-start; }
  .ai-head-controls { align-items: flex-end; flex-direction: column; }
  .ai-suggestions { margin-inline: -4px; padding-inline: 4px; }
  .ai-messages { min-height: 0; max-height: none; }
  .ai-message { max-width: 92%; }
  .ai-compose { position: static; z-index: 4; padding: 9px 0 0; background: var(--surface); }
  .ai-compose button { min-width: 78px; padding-inline: 10px; }
  .ai-attachment-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (max-width: 360px) {
  .main { padding-inline: 6px; }
  .nav-item { font-size: 8px; }
  .top-actions #quickAddToggle,
  .top-actions #focusModeBtn,
  .top-actions #smartPickBtn { font-size: 8px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .metric-card,
  .metric-card:last-child { grid-column: 1; min-height: 78px; }
  .admin-metrics { grid-template-columns: 1fr; }
  .confirm-card { grid-template-columns: 1fr; }
  .ai-compose { grid-template-columns: 1fr; }
  .ai-compose button { width: 100%; }
  .friend-actions,
  .relationship-actions,
  .admin-detail-actions,
  .assessment-actions,
  .confirm-actions { grid-template-columns: 1fr; }
  .friend-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) and (max-height: 520px) and (orientation: landscape) {
  html { scroll-padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .sidebar { height: calc(58px + env(safe-area-inset-bottom)); padding-block: 4px; }
  .nav { display: flex; height: 50px; overflow-x: auto; }
  .nav-item { min-width: 76px; min-height: 48px; flex: 1 0 76px; flex-direction: row; gap: 5px; }
  .main { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .chat-form { bottom: calc(61px + env(safe-area-inset-bottom)); }
  .toast,
  .tour-card { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .auth-card,
  .setup-card,
  .focus-card,
  .profile-preview-card,
  .confirm-card,
  .admin-user-card,
  .assessment-card,
  .command-palette-card { max-height: 100dvh !important; border-radius: 0 !important; }
}

/* One explicit touch-scroll owner avoids iOS/Android root-scroll deadlocks.
   Keep this final so no legacy workspace rule can reclaim vertical scrolling. */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  .landing-page {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .app-shell {
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .main {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
    touch-action: pan-y;
  }
}

/* Dashboard compact fix for small screens and high browser zoom. */
@media (max-width: 820px) {
  #dashboardView.view.active {
    display: block !important;
    overflow: visible !important;
  }

  #dashboardView .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  #dashboardView .hero-panel {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 14px;
    gap: 10px;
  }

  #dashboardView .hero-panel h2 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.14;
  }

  #dashboardView .hero-panel p:last-child {
    font-size: 13px;
  }

  #dashboardView .metric-card {
    min-height: 92px;
    padding: 10px;
  }

  #dashboardView .metric-card strong {
    font-size: 25px;
  }

  #dashboardView .content-grid.two.dashboard-section.active {
    grid-template-columns: 1fr;
  }

  #dashboardView .dashboard-section.active,
  #dashboardView .dashboard-section.active .panel,
  #dashboardView .dashboard-section.active .task-list,
  #dashboardView .dashboard-section.active .subject-progress-list {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 820px) {
  #dashboardView [data-dashboard-section="rewards"].active {
    height: auto !important;
    overflow: visible !important;
  }

  #dashboardView [data-dashboard-section="rewards"] .reward-workspace {
    grid-template-columns: 1fr;
    grid-template-areas: "side" "main";
    gap: 10px;
  }

  #dashboardView [data-dashboard-section="rewards"] .reward-main,
  #dashboardView [data-dashboard-section="rewards"] .reward-side {
    overflow: visible;
  }

  #dashboardView [data-dashboard-section="rewards"] .reward-level-track {
    grid-auto-columns: minmax(150px, 78%);
  }

  #dashboardView [data-dashboard-section="rewards"] .reward-mission-list {
    max-height: none;
    overflow: visible;
  }

  #adminView .admin-list,
  #adminView .admin-announcement-list,
  #adminView .admin-audit-list {
    max-height: min(55dvh, 520px);
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
  }

  #adminView .admin-side-stack {
    display: grid;
    gap: 10px;
  }
}

@media (max-width: 820px) {
  #socialView .social-chat-panel {
    display: grid;
    grid-template-rows: auto auto minmax(280px, 52dvh) auto auto;
    gap: 8px;
  }

  #socialView .chat-box {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #socialView .chat-form {
    position: static !important;
    bottom: auto !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding-top: 0;
    background: transparent;
  }

  #socialView .chat-form input {
    min-width: 0;
  }

  #socialView .chat-form button {
    min-width: 82px;
    padding-inline: 11px;
  }
}

/* Final small-screen overrides: keep content visible at high browser zoom. */
@media (max-width: 820px) {
  #subjectsView .subject-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #subjectsView .subject-card {
    flex: 0 0 min(82vw, 310px) !important;
    width: auto !important;
  }

  #tasksView.view.active,
  #gradesView.view.active,
  #socialView.view.active,
  #adminView.view.active,
  #tasksView > .panel,
  #socialView .social-workspace,
  #socialView .social-column {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #tasksView .task-list.spacious {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #socialView .social-column:nth-child(2) .social-friends-list,
  #socialView .social-column:nth-child(2) .group-chat-list {
    flex: none !important;
    min-height: 150px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Collection limits must remain last in the cascade. */
.board-stack {
  max-height: clamp(240px, 36dvh, 480px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#tasksView .task-section > .task-list,
#gradesView .grade-task-sections .task-list {
  min-height: 0 !important;
  max-height: clamp(300px, 48dvh, 640px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#gradesView .grades-table,
#gradesView .planner-list,
#subjectsView .subject-detail .task-list {
  max-height: clamp(280px, 52dvh, 680px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#socialView .search-results,
#socialView .relationship-list,
#socialView .social-friends-list,
#socialView .group-chat-list {
  min-height: 0;
  max-height: clamp(220px, 38dvh, 480px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#socialView .social-friends-list,
#socialView .group-chat-list {
  min-height: 180px !important;
}

#dashboardView :where(.task-list, .subject-progress-list, .focus-timeline, .risk-list, .activity-list, .insight-list, .reward-mission-list) {
  max-height: clamp(260px, 42dvh, 520px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#adminView :where(.admin-list, .admin-live-list, .admin-ticket-list, .admin-trash-list, .admin-announcement-list, .admin-audit-list) {
  max-height: clamp(280px, 48dvh, 620px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 820px) {
  #tasksView .task-section > .task-list,
  #gradesView .grade-task-sections .task-list {
    max-height: min(58dvh, 520px) !important;
  }

  #socialView .social-friends-list,
  #socialView .group-chat-list {
    max-height: min(46dvh, 420px) !important;
    overflow-y: auto !important;
  }
}

/* Final adaptive sizing — keep after all legacy breakpoints. */
#tasksView .task-list.spacious {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: clamp(8px, 1.4vw, 16px) !important;
  overflow: visible !important;
}

#tasksView .task-section,
#gradesView .grade-task-sections .task-section {
  height: clamp(230px, 42dvh, 500px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
}

#tasksView .task-section > .task-list,
#gradesView .grade-task-sections .task-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

#gradesView .grades-workspace {
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr) !important;
  grid-template-areas: "grades side" "tasks tasks" !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  overflow: visible !important;
}

#gradesView .grades-list-panel,
#gradesView .grades-side-stack {
  height: clamp(290px, 47dvh, 550px) !important;
  min-height: 0 !important;
  max-height: none !important;
  position: static !important;
  overflow: hidden !important;
}

#gradesView .grades-list-panel,
#gradesView .grades-side-stack > .panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
}

#gradesView .grades-side-stack > .panel {
  height: 100%;
  overflow: hidden;
}

#gradesView .grades-table,
#gradesView .planner-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

#gradesView .grade-task-sections {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.4vw, 16px);
}

@media (max-width: 760px) {
  #tasksView .task-list.spacious,
  #gradesView .grade-task-sections {
    grid-template-columns: 1fr !important;
  }

  #gradesView .grades-workspace {
    grid-template-columns: 1fr !important;
    grid-template-areas: "grades" "side" "tasks" !important;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  #tasksView .task-section,
  #gradesView .grade-task-sections .task-section {
    height: max(200px, 37dvh) !important;
  }

  #gradesView .grades-list-panel,
  #gradesView .grades-side-stack {
    height: max(250px, 43dvh) !important;
  }
}

/* Task list viewport: two cards remain visible on compact laptops. */
#tasksView .task-section {
  height: clamp(350px, 54dvh, 600px) !important;
}

#tasksView .task-section > .task-list .task-card {
  padding: 9px 10px;
  gap: 8px;
}

#tasksView .task-section > .task-list .task-main { gap: 3px; }
#tasksView .task-section > .task-list .task-meta { gap: 3px 8px; font-size: 11px; }
#tasksView .task-section > .task-list .round-action {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
}

@media (max-height: 700px) and (min-width: 761px) {
  #tasksView .task-section { height: max(330px, 52dvh) !important; }
}

@media (max-width: 760px) {
  #tasksView .task-section {
    height: min(58dvh, 520px) !important;
    min-height: 350px !important;
  }
}
/* Notes stays a two-pane workspace on larger screens and becomes a stacked notebook on phones. */
@media (max-width: 820px) {
  #notesView.view.active {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - 170px);
    overflow: visible !important;
  }

  #notesView .notes-workspace {
    height: auto !important;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #notesView .notes-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 220px);
    overflow-x: auto;
    overflow-y: hidden;
  }
}