/* Small-screen refinements, loaded after page styles. Desktop rules stay intact. */
@media (max-width: 1024px) {
  .shell .sidebar {
    height: 100vh;
    height: 100dvh;
  }

  .shell .side-frame { overflow-y: auto; overscroll-behavior: contain; }
  .shell .side-top { gap: 8px; padding-inline: 0; }
  .shell .close-btn { flex-shrink: 0; }
  .shell .content,
  .shell .content > *,
  .shell .card,
  .shell .field,
  .shell .form-grid > *,
  .shell .field > *,
  .shell .meta-list > *,
  .shell .cal-editor > * { min-width: 0; }

  .shell .input,
  .shell .select,
  .shell .cal-form input,
  .shell .cal-form select,
  .shell .cal-form textarea { min-width: 0; max-width: 100%; }

  .shell .meta-list dd,
  .shell .field-help,
  .shell .field-error,
  .shell .hello h1,
  .shell .card-head h2,
  .shell .notif-body b,
  .shell .notif-item b { overflow-wrap: anywhere; }

  .shell .table-wrap,
  .shell .cal-scroll { max-width: 100%; overscroll-behavior-x: contain; }

  .shell .hello-right,
  .shell .card-head,
  .shell .pagination,
  .shell .notif-tabs { flex-wrap: wrap; }

  .shell .bp-hero { grid-template-columns: minmax(0, 1fr); }
  .shell .bp-title { max-width: 100%; }
  .shell .bp-chip .icon { flex-shrink: 0; }
}

@media (max-width: 860px) {
  .site-header .nav {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  .shell .panel .topbar .search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  /* Anchor to the topbar, rather than the bell beside the user avatar. */
  .shell .bell { position: static; }
  .shell .notif-pop {
    top: 100%;
    right: 12px;
    width: min(340px, calc(100% - 24px));
    max-width: calc(100% - 24px);
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .shell .content .list-filter-bar .list-filter-search { min-width: 0; }
  .shell .hello-right { min-width: 0; }
  .shell .hello-right > .btn { white-space: normal; text-align: center; }

  /* Avoid input-focus zoom on mobile while keeping desktop typography. */
  .shell input:not([type="checkbox"]):not([type="radio"]),
  .shell select,
  .shell textarea,
  .shell .content .list-filter-bar input,
  .shell .content .list-filter-bar select,
  .auth .control input { font-size: 16px; }
}

@media (max-width: 560px) {
  .shell .panel .topbar { padding-inline: 16px; }
  .shell .content { padding-inline: 16px; }
  .shell .card { padding: 18px; }
  .shell .admin-dash .card { padding: 12px 14px; }
  .shell .donut-wrap { grid-template-columns: minmax(0, 1fr); }
  .shell .pagination { justify-content: flex-start; }
  .shell .pagination > span { flex-basis: 100%; }
  .shell .form-actions > .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
  .shell .upcoming-page .list-filter-bar > label { flex-basis: 100%; }

  .auth-top { flex-wrap: wrap; gap: 16px; }
  .auth-card { padding: 24px 20px; margin-block: 24px; }
  .auth .field,
  .auth .control { min-width: 0; }
  .auth .control input { min-width: 0; max-width: 100%; }
  .auth .trial-note { align-items: flex-start; }

  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero .badge { max-width: 100%; white-space: normal; text-align: left; }
  .hero .badge .pulse { flex-shrink: 0; }
  .site-header .brand { min-width: 0; }
  .site-header .nav-toggle { flex-shrink: 0; }
  .app-window .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-window .stat-row > * { min-width: 0; overflow-wrap: anywhere; }
  .foot-legal { flex-wrap: wrap; }
}