dialog {
  width: min(440px, calc(100% - 32px));
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 20px; }
  .app-shell { grid-template-columns: 178px minmax(0, 1fr); }
  main { padding: 28px 24px; }
  .coding-layout { grid-template-columns: 1fr; }
  .guidance { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .analysis-grid, .export-grid { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: 1fr; }
  .workflow > i { display: none; }
  .workflow-step { border-top: 1px solid var(--line); padding-top: 12px; }
}

@media (max-width: 680px) {
  .topbar { height: 62px; grid-template-columns: 1fr auto; }
  .project-switcher { display: none; }
  .brand { font-size: 23px; }
  .app-shell { display: block; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; display: block; }
  .project-list, .settings { display: none; }
  .nav-list { display: flex; overflow-x: auto; gap: 2px; }
  .rail-item { white-space: nowrap; font-size: 12px; padding: 9px 10px; }
  .rail-item span { display: none; }
  main { padding: 22px 14px 40px; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 22px; }
  .page-heading .secondary { font-size: 12px; padding: 8px; }
  .stats { gap: 9px; }
  .stats article { padding: 13px; min-height: 90px; }
  .stats strong { font-size: 21px; }
  .composer { padding: 0 15px 16px; }
  .example-row { grid-template-columns: 1fr 22px; }
  .code-field { grid-column: 1; }
  .remove-example { grid-column: 2; grid-row: 1; }
  .panel-heading { padding: 16px; }
  .report-body { padding: 23px 20px; }
  .report-meta { display: block; line-height: 1.8; }
  .report-meta strong { margin-right: 8px; }
}