/* ---------- Responsive polish ---------- */
@media (max-width: 860px) {
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .shell__content::before,
  .shell--collapsed .shell__content::before {
    inset-inline-start: 0;
  }

  .topbar {
    align-items: flex-start;
    padding: .75rem 1rem;
  }

  .topbar__start {
    min-width: 0;
    flex: 1;
  }

  .topbar__title {
    overflow: hidden;
    max-width: 46vw;
    font-size: var(--text-lead);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__subtitle {
    overflow: hidden;
    max-width: 46vw;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar__end {
    gap: .5rem;
    justify-content: flex-end;
    min-width: 0;
  }

  .topbar__user,
  .topbar__logout,
  .topbar .lang-switch,
  .topbar .theme-switch {
    display: none;
  }

  .topbar__menu,
  .notif-bell {
    width: 36px;
    height: 36px;
  }

  .shell__content {
    /* Must clear both fixed elements stacked at this corner: .mobile-nav
       plus .feedback-trigger sitting above it at bottom: 5.3rem with its
       own ~2.75rem height (see the .feedback-trigger rule just above),
       whose top edge lands at ~8.05rem -- 6.25rem left its last ~1.8rem
       uncovered, letting page content show through underneath it. */
    padding: 1rem .9rem calc(8.5rem + env(safe-area-inset-bottom));
    max-width: 100%;
  }

  .dashboard-hero { align-items: flex-start; flex-direction: column; gap: .5rem; padding: .75rem 1rem; }
  .dashboard-hero .welcome-card__title { font-size: var(--text-heading); }
  .dashboard-hero .welcome-card__subtitle { font-size: var(--text-small); margin-top: .125rem; }
  .dashboard-hero__context { display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: .5rem; font-size: var(--text-label); text-align: start; }
  .dashboard-actions__head { align-items: flex-start; }
  .dashboard-summary__head { flex-direction: column; align-items: flex-start; gap: .5rem; }

  .page__header {
    align-items: stretch;
    flex-direction: column;
    /* A wrapping column container sizes the action row at its narrowest
       (wrapped) height, leaving the stretched buttons far too tall. */
    flex-wrap: nowrap;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
  }

  .page__header > div:has(.btn) {
    justify-content: stretch;
  }

  .page__title {
    font-size: var(--text-subtitle);
    line-height: 1.25;
  }

  .page__subtitle {
    font-size: var(--text-small);
  }

  .page-actions,
  .page__actions,
  .row-actions,
  .form-actions,
  .bulk-bar,
  .quick-actions {
    justify-content: stretch;
  }

  .page-actions > *,
  .page__actions > *,
  .row-actions > *,
  .form-actions > *,
  .bulk-bar > *,
  .quick-actions > * {
    flex: 1 1 150px;
    min-width: 0;
  }

  /* Status badges sit beside the stretched buttons at their natural size. */
  .row-actions > .badge {
    flex: none;
  }

  .page-actions .btn,
  .page__actions .btn,
  .row-actions .btn,
  .form-actions .btn,
  .bulk-bar .btn,
  .quick-actions .btn {
    width: 100%;
  }

  .card,
  .planner-panel,
  .planner-note,
  .toolbar,
  .notifications-card,
  .notif-live {
    border-radius: var(--radius);
  }

  .card {
    padding: 1rem;
  }

  .toolbar {
    padding: .75rem;
  }

  .planner-summary,
  .leaderboard-summary,
  .ward-grid,
  .missing-grid,
  .certificate-grid,
  .schedule-card {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  .stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem;
  }

  .stat-card__icon {
    width: 34px;
    height: 34px;
    font-size: var(--text-lead);
  }

  .stat-card__label {
    font-size: var(--text-label);
  }

  .stat-card__value {
    font-size: var(--text-subtitle);
  }

  .stat-card--link {
    position: relative;
  }

  .stat-card__arrow {
    position: absolute;
    inset-inline-end: .75rem;
    inset-block-start: .75rem;
  }

  .upcoming-halaqah {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .upcoming-halaqah__actions {
    justify-content: stretch;
  }

  .upcoming-halaqah__actions .btn {
    flex: 1 1 0;
  }

  .podium {
    grid-template-columns: 1fr;
  }

  .podium__place--1 {
    transform: none;
  }

  .certificate-card {
    min-height: 0;
    padding: 1.25rem 1rem;
  }

  .certificate__border {
    padding: 1.5rem 1rem;
  }

  .certificate__footer {
    align-items: center;
    flex-direction: column;
    gap: .375rem;
    margin-top: 1.25rem;
  }

  .pagination {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .125rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .pagination__btn,
  .pagination__page {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
  }

  .form-actions--sticky {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
    margin-inline: -.9rem;
    padding: .75rem 1rem;
  }

  .assignment-list li,
  .config-list li,
  .top-students li {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .assignment-list li .btn {
    margin-inline-start: auto;
  }

  .notifications-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notifications-toolbar .field--grow,
  .notifications-toolbar .field:last-child {
    grid-column: auto;
  }

  .notif-live__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notif {
    grid-template-areas:
      "icon body"
      ". action";
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .notif--selectable {
    grid-template-areas:
      "select icon body"
      ". . action";
    grid-template-columns: 44px 42px minmax(0, 1fr);
  }

  .notif__action .button_to,
  .notif__action .btn {
    width: 100%;
  }

  .notifications-bulk > * {
    flex: 0 1 auto;
  }

  .notifications-bulk__count {
    flex: 1 1 8rem;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: flex;
    align-items: center;
    position: sticky;
    gap: .375rem;
  }

  .topbar__end {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-inline-start: 0;
  }

  .topbar-search,
  .notif-bell {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
  }

  .topbar__title,
  .topbar__subtitle {
    max-width: min(52vw, 16rem);
  }

  .count-pill {
    margin-inline-start: .25rem;
    vertical-align: .1rem;
  }

  .table {
    font-size: var(--text-small);
  }

  .table th,
  .table td {
    padding: .5rem .75rem;
  }

  .notif {
    grid-template-areas:
      "icon body"
      ". action";
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .75rem;
    padding: 1rem;
  }

  .notif--selectable {
    grid-template-areas:
      "select icon body"
      ". . action";
    grid-template-columns: 44px 36px minmax(0, 1fr);
  }

  .notif__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: var(--text-lead);
  }

  .notif__action {
    width: 100%;
    margin-inline-start: 0;
  }

  .notif__action .btn {
    width: 100%;
  }

  .notif-live__head {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
  }

  .notif-live__head .btn {
    width: 100%;
  }

  .notif-live__items {
    grid-template-columns: 1fr;
  }

  .notif-live__item-title {
    white-space: normal;
  }

  .notifications-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .notifications-toolbar .field,
  .notifications-toolbar .field--grow,
  .notifications-toolbar .field:last-child {
    grid-column: 1;
  }

  .notifications-bulk {
    align-items: stretch;
  }

  .notifications-bulk__select,
  .notifications-bulk__count,
  .notifications-bulk .btn {
    flex-basis: 100%;
  }

  .ward-grid {
    grid-template-columns: 1fr;
  }

  .ward-card {
    padding: 1rem;
  }

  .ward-card__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ward-card__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ward-card__actions {
    justify-content: stretch;
  }

  .ward-card__actions .btn {
    flex: 1 1 140px;
  }

  .today-grid,
  .today-mini-list--columns {
    grid-template-columns: 1fr;
  }

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

  .today-row__actions {
    grid-column: 1 / -1;
  }

  .today-row__actions {
    justify-content: stretch;
  }

  .today-row__actions .btn,
  .today-mini-list .btn {
    flex: 1 1 150px;
  }

  .today-mini-list li {
    flex-wrap: wrap;
  }

  .today-mini-list li > .btn {
    flex-basis: 100%;
  }

  .assignment-list li {
    align-items: stretch;
    flex-direction: column;
    gap: .5rem;
  }

  .assignment-list li .btn {
    width: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 420px) {
  .notif {
    grid-template-areas:
      "body"
      "action";
    grid-template-columns: minmax(0, 1fr);
  }

  .notif--selectable {
    grid-template-areas:
      "select body"
      "action action";
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .notif__icon {
    display: none;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: .75rem .75rem;
  }

  .shell__content {
    padding-inline: .75rem;
  }

  .form-actions--sticky {
    margin-inline: -.7rem;
    padding-inline: .75rem;
  }

  .mobile-nav {
    inset-inline: .5rem;
    padding: .25rem;
    border-radius: var(--radius-lg);
  }

  .mobile-nav__item {
    min-height: 48px;
    border-radius: var(--radius);
  }

  .mobile-nav__label {
    font-size: var(--text-micro);
  }

  .btn {
    font-size: var(--text-body);
  }

  .planner-summary__item,
  .leaderboard-summary__item {
    min-height: 0;
    padding: .75rem .75rem;
  }

  .stat-card {
    align-items: flex-start;
    padding: 1rem;
  }

  .stat-card__icon {
    width: 38px;
    height: 38px;
  }

  .stat-card__label {
    line-height: 1.25;
  }

  .portion-row {
    grid-template-columns: 1fr;
  }

  .portion-row__surah,
  .portion-row__type,
  .portion-row__ayah,
  .portion-row__grade {
    grid-column: 1 / -1;
  }

  .portion-remove {
    width: 100%;
  }
}

/* Touch layouts retain the compact desktop rhythm while meeting the 44px
   target-size requirement for controls that are intentionally dense. */
@media (max-width: 860px) {
  .btn--sm,
  .toolbar__input,
  .topbar__menu,
  .topbar-search,
  .notif-bell,
  .topbar__logout,
  .sidebar__logout,
  .lang-switch__link,
  .theme-switch__option,
  .feedback-ratings span,
  .filter-chip,
  .filter-chips__clear,
  .saved-view-chip__delete,
  .segmented__option > span,
  .acs__input.input,
  .acs__result {
    min-height: 44px;
  }

  .btn--sm,
  .topbar__menu,
  .topbar-search,
  .notif-bell,
  .lang-switch__link,
  .theme-switch__option,
  .saved-view-chip__delete {
    min-width: 44px;
  }

  .feedback-trigger,
  .portion-remove,
  .saved-view-chip > a,
  .chip--link {
    min-width: 44px;
    min-height: 44px;
  }

  .saved-view-chip > a,
  .chip--link {
    display: inline-flex;
    align-items: center;
  }

  .command-palette__head button,
  .feedback-dialog__head button,
  .flash__dismiss,
  .msel__tag button {
    min-width: 44px;
    min-height: 44px;
  }
}