/* Final workspace geometry, kept separate from legacy view-specific rules. */
#appShell *, .auth-card *, .application-card * { letter-spacing: 0; }
#appShell .top-actions > .search-box { position: relative; inset: auto; transform: none; }
.mobile-nav-toggle { display: none; }
#mobileNavMenu:not(:popover-open), .color-palette-popover[popover]:not(:popover-open) { display: none !important; }
#mobileNavMenu {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  color: var(--text);
  background: var(--surface);
}
#mobileNavMenu:popover-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mobile-view-button { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px; border: 0; border-radius: 6px; background: var(--surface-soft); color: var(--text); text-align: left; }
.mobile-view-button.admin-only { display: none; }
body.is-admin .mobile-view-button.admin-only, body.admin-enabled .mobile-view-button.admin-only { display: flex; }
.mobile-view-button .nav-icon { display: inline-block; flex: 0 0 20px; height: 20px; background-color: var(--primary); }
.color-palette-popover[popover]:popover-open {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  box-sizing: border-box;
  width: min(368px, calc(100vw - 24px)) !important;
  height: fit-content !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 16px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.color-palette-popover[popover]::backdrop, #mobileNavMenu::backdrop { background: rgb(0 0 0 / 28%); }
.palette-heading { grid-column: 1 / -1; padding-bottom: 6px; font-size: 16px; }
.color-palette-popover[popover] .swatch { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1; padding: 0 !important; border-radius: 50% !important; }
.color-palette-popover[popover] .swatch.selected { outline: 2px solid var(--text); outline-offset: 2px; }
#appShell #subjectsView .form-panel.color-palette-open { min-height: 0 !important; }
#appShell #tasksView .task-main-panel { grid-template-rows: auto auto auto auto minmax(0, 1fr) !important; }
#appShell #tasksView .board-task { height: auto !important; max-height: none !important; min-height: 92px !important; }
#appShell #tasksView .board-task > * { flex-shrink: 0 !important; }
#appShell #dashboardView.view.active { overflow-y: auto !important; overflow-x: hidden !important; }
#appShell #dashboardView .dashboard-section.active { flex: 0 0 auto !important; min-height: 300px !important; }
#appShell #dashboardView .dashboard-section.active > .panel { height: auto !important; min-height: 220px !important; }
#appShell #dashboardView .dashboard-section.active .task-list { max-height: 500px; }
#taskCreate { border-block: 1px solid var(--line); min-width: 0; }
#taskCreate summary { padding: 12px 4px; cursor: pointer; color: var(--primary); font-weight: 650; font-size: 14px; }
#appShell #tasksView #taskCreate:not([open]) > .task-form { display: none !important; }
#appShell #tasksView #taskCreate[open] > .task-form { display: grid !important; margin-block: 0 12px !important; }
#appShell #tasksView:has(#taskCreate[open]) .task-main-panel { overflow-y: auto !important; }
.application-verification, #applicationVerification { display: grid; gap: 12px; padding-block: 16px; }
#applicationVerification[hidden], #confirmOverlay label[hidden] { display: none; }
#confirmOverlay label { display: grid; gap: 8px; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 820px) {
  .landing-nav .landing-actions { display: flex !important; width: auto !important; }
  .landing-nav #landingLoginBtn { display: inline-flex !important; }
  .landing-nav #landingRegisterBtn { display: none; }
  .landing-nav { align-items: center; }
  /* The shell owns vertical scrolling; content must not inherit desktop locks. */
  body:has(#appShell:not(.app-hidden)) #appShell { height: 100dvh !important; overflow-x: hidden !important; overflow-y: auto !important; display: block !important; }
  body:has(#appShell:not(.app-hidden)) #appShell .main { height: auto !important; min-height: 100% !important; overflow: visible !important; padding: 12px 12px calc(90px + env(safe-area-inset-bottom)) !important; display: block !important; }
  #appShell .sidebar { height: auto !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important; }
  #appShell .sidebar .nav { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 2px !important; overflow: visible !important; }
  #appShell .sidebar .nav > .nav-item { display: none !important; }
  #appShell .sidebar .nav > .mobile-primary, #appShell .mobile-nav-toggle { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; max-width: none; height: 56px; padding: 5px 2px; border-radius: 6px; font-size: 10px; line-height: 1.2; order: var(--mobile-order, 4); }
  #appShell .mobile-nav-toggle { border: 0; background: transparent; color: var(--muted); }
  #appShell .sidebar .nav-icon { display: inline-block !important; width: 20px; height: 20px; flex: 0 0 20px; }
  #appShell .mobile-nav-toggle .nav-icon { background: var(--muted); }
  #mobileNavMenu { inset: auto 10px calc(80px + env(safe-area-inset-bottom)); margin: 0; width: auto; max-height: calc(100dvh - 110px); overflow-y: auto; }
  #appShell .topbar { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 10px !important; margin-bottom: 16px; }
  #appShell .topbar > div:first-child { flex: 1 1 auto; }
  #appShell .topbar h1 { font-size: 22px !important; line-height: 1.2; }
  #appShell .top-actions { display: flex !important; flex-wrap: wrap; width: 100% !important; gap: 8px !important; }
  #appShell .top-actions > .search-box { flex: 1 1 150px; width: auto !important; height: 44px !important; }
  #appShell .top-actions > .search-box input { min-height: 40px; }
  #appShell .top-actions .mini-profile { width: 44px; height: 44px; padding: 4px; flex: 0 0 44px; }
  #appShell .mini-profile span, #appShell #focusModeBtn, #appShell #smartPickBtn, #appShell #themeToggle { display: none !important; }
  #appShell #quickAddToggle { display: grid !important; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0 !important; font-size: 0 !important; overflow: hidden; }
  #appShell #quickAddToggle::after { content: "+" !important; font-size: 26px !important; font-weight: 400; position: static; }
  #appShell #cloudStatusBtn { display: none !important; }
  #appShell .view.active, #appShell .view.active :is(.dashboard-section.active, .split-layout, .content-grid, .task-workspace, .calendar-workspace, .grades-workspace, .profile-workspace, .profile-content, .settings-panel, .notes-workspace) { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; flex: none !important; }
  #appShell #dashboardView .dashboard-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  #appShell #dashboardView .hero-panel { grid-column: 1 / -1; min-height: 150px !important; height: auto !important; padding: 16px !important; }
  #appShell #dashboardView .hero-panel h2 { font-size: 22px !important; line-height: 1.25; }
  #appShell #dashboardView .hero-panel p { font-size: 13px !important; }
  #appShell #dashboardView .metric-card { min-height: 98px !important; height: auto !important; padding: 10px !important; overflow-wrap: anywhere; }
  #appShell #dashboardView .metric-card > span, #appShell #dashboardView .metric-card small { font-size: 11px !important; line-height: 1.3; }
  #appShell #dashboardView .metric-card strong { font-size: 24px !important; }
  #appShell #dashboardView .dashboard-section.active { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; gap: 18px !important; }
  #appShell .view.active :is(.panel, .form-panel, .task-main-panel, .grades-side-stack, .profile-overview, .settings-section, .calendar-main-panel, .notes-library, .notes-editor-panel) { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
  #appShell #dashboardView .dashboard-section.active .panel { height: auto !important; overflow: visible !important; }
  #appShell .view.active :is(.task-list, .subject-progress-list, .focus-timeline, .risk-list, .activity-list, .insight-list, .grades-table, .planner-list, .grade-group-items, .grade-task-sections, .grade-task-list, .calendar-backlog, .week-grid, .day-tasks, .manual-grade-list, .profile-settings-scroll) { height: auto !important; max-height: none !important; overflow: visible !important; flex: none !important; }
  #appShell #subjectsView .split-layout { display: flex !important; flex-direction: column; gap: 18px; }
  #appShell #subjectsView .subject-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  #appShell #subjectsView .subject-card { width: 100% !important; min-width: 0 !important; }
  #appShell #tasksView .task-main-panel { display: flex !important; flex-direction: column; gap: 12px !important; }
  #appShell #tasksView .panel-head { display: flex !important; align-items: flex-start; flex-direction: column; gap: 10px; }
  #appShell #taskFilter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  #appShell #taskFilter button { font-size: 11px; padding-inline: 4px; white-space: normal; }
  #appShell #taskCreate { width: 100%; flex: none; }
  #appShell #tasksView #taskCreate[open] > .task-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #appShell #taskForm input[name="title"], #appShell #taskForm button[type="submit"] { grid-column: 1 / -1; }
  #appShell #tasksView .task-board { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; gap: 18px !important; }
  #appShell #tasksView .board-column, #appShell #tasksView .board-stack { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: none !important; }
  #appShell #tasksView .board-column { width: 100% !important; }
  #appShell #tasksView .board-task { min-height: 70px !important; height: auto !important; }
  #appShell #tasksView .task-command-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  #appShell #tasksView .task-command-card { padding: 8px !important; min-height: 68px !important; border: 0; background: var(--surface-soft); }
  #appShell #tasksView .task-command-card span { font-size: 10px; }
  #appShell #tasksView .task-command-card strong { font-size: 21px; }
  #appShell #tasksView .board-task { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px !important; padding: 12px !important; }
  #appShell #tasksView .board-task strong { font-size: 14px !important; line-height: 1.35 !important; height: auto !important; max-height: none !important; -webkit-line-clamp: unset !important; }
  #appShell #tasksView .board-task small { font-size: 12px !important; line-height: 1.4 !important; }
  #appShell #dashboardView .task-card { display: grid !important; grid-template-columns: 4px minmax(0, 1fr) !important; gap: 10px !important; }
  #appShell #dashboardView .task-actions { grid-column: 2; display: flex !important; flex-direction: row !important; gap: 8px !important; justify-content: flex-end; }
  #appShell #dashboardView .task-actions .round-action { width: 44px !important; min-width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important; height: 44px !important; }
  #appShell #calendarView .week-grid { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; }
  #appShell #calendarView .day-column { min-height: 110px !important; height: auto !important; }
  #appShell #gradesView .grades-workspace { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-auto-rows: auto !important; align-items: start !important; gap: 18px !important; }
  #appShell #profileView .profile-workspace { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  #appShell #profileView .profile-content { display: block !important; }
  #appShell #profileView .settings-panel:not(.active) { display: none !important; }
  #appShell #notesView .notes-workspace { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  #appShell #notesView .notes-list { max-height: 180px !important; overflow-y: auto !important; }
  #appShell #notesView .notes-editor-panel { min-height: 380px !important; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView.view.active { height: auto !important; overflow: visible !important; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-workspace { height: auto !important; overflow: visible !important; display: flex !important; flex-direction: column; gap: 14px; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-sidebar { height: auto !important; max-height: 300px !important; overflow-y: auto !important; flex: none; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-chat-panel { height: 460px !important; min-height: 400px !important; grid-template-rows: auto minmax(0, 1fr) auto !important; flex: none; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-hero-visual, body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-suggestions { display: none !important; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-messages { grid-row: 2 !important; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-compose { grid-row: 3 !important; position: static; height: auto !important; max-height: none !important; overflow: visible !important; contain: none; grid-template-rows: auto 48px !important; gap: 8px !important; padding-top: 10px !important; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-attachment-bar { height: auto !important; max-height: none !important; min-height: 36px !important; }
  body:has(#appShell:not(.app-hidden)) #appShell #genaiView .ai-compose > textarea { height: 48px !important; max-height: 48px !important; padding: 10px; line-height: 22px; }
  #appShell #socialView .social-workspace { height: calc(100dvh - 245px) !important; min-height: 400px !important; }
  #appShell .task-main strong, #appShell .board-task strong, #appShell .subject-card h3 { overflow-wrap: anywhere; white-space: normal !important; }
  #appShell .toolbar-row { flex-wrap: wrap; }
  #appShell .toolbar-row .search-box { min-width: 0; flex: 1 1 160px; }
}
@media (min-width: 821px) and (max-width: 1180px) {
  #appShell #dashboardView .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #appShell #dashboardView .hero-panel { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .color-palette-popover[popover]:popover-open { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}