/*
 * Responsive guard
 *
 * This file is intentionally structural. It prevents intrinsic sizing and
 * fixed UI from clipping content without restyling feature-owned surfaces.
 */

/* Width containment: only known application/layout roots and their direct
   layout children participate. Avoid a universal selector so embedded
   widgets keep their own sizing model. */
:where(
  .app-shell,
  .container,
  .workspace-page,
  .workspace-subpage,
  .workspace-head,
  .workspace-title-block,
  .workspace-head-actions,
  .workspace-section,
  .workspace-content-section,
  .workspace-section-head,
  .panel,
  .form,
  .detail,
  .detail-appbar,
  .card-head,
  .section-title,
  .content-box,
  .grid,
  .split,
  .inline-fields,
  .stats,
  .compact-stats,
  .workspace-metrics
) {
  min-width: 0;
  max-width: 100%;
}

/* Known grid/flex item roots. Intrinsic content such as long Korean titles,
   URLs, account IDs, and math must not force a parent track wider. */
:where(
  .home-workspace,
  .home-dashboard-grid,
  .home-context-list,
  .home-context-item,
  .home-context-copy,
  .question-list,
  .question-results-list,
  .question-row,
  .compact-question-row,
  .question-card,
  .question-card-content,
  .question-detail-page,
  .question-detail-heading,
  .answer-list,
  .answer-card,
  .answer-content,
  .ai-solution-copy,
  .quiz-workspace,
  .quiz-grid,
  .quiz-card,
  .quiz-list-card,
  .quiz-code-entry,
  .quiz-editor-grid,
  .quiz-start,
  .quiz-result,
  .quiz-live-grid,
  .quiz-live-host-main,
  .community-modern,
  .community-shell,
  .community-left-rail,
  .community-main-panel,
  .community-control-panel,
  .community-board,
  .community-detail-page,
  .community-detail-toolbar,
  .community-study-room,
  .community-customize,
  .notes-workspace,
  .note-layout,
  .note-card,
  .note-inspector,
  .profile-page,
  .profile-cover,
  .profile-cover-main,
  .profile-identity,
  .profile-overview-layout,
  .profile-overview-stack,
  .profile-overview-side,
  .profile-section-card,
  .profile-row-card,
  .profile-activity-row,
  .activity-page,
  .activity-overview-card,
  .trophy-card,
  .school-calendar-page,
  .school-calendar-shell,
  .school-day-panel,
  .class-notice-row,
  .class-document-row,
  .class-roster-list > div,
  .roster-preview-list > div,
  .events-workspace,
  .event-card,
  .event-detail-page,
  .inventory-card,
  .reward-preview,
  .admin-workspace,
  .admin-panel-grid,
  .support-workspace,
  .club-layout,
  .club-directory,
  .club-directory-item,
  .festival-editor-stack,
  .festival-review-row,
  .wordmaster-board,
  .wordmaster-list,
  .wordmaster-drill,
  .auth-wrap,
  .auth-card,
  .modal-backdrop,
  .ui-dialog-card,
  .document-viewer-modal,
  .admin-pdf-modal
) {
  min-width: 0;
  max-width: 100%;
}

/* Text wrapping is scoped to user/data copy. Controls keep their feature
   typography while their labels are allowed to wrap where necessary. */
:where(
  .workspace-title-block,
  .workspace-section-head,
  .home-context-copy,
  .question-row-main,
  .question-card-content,
  .question-detail-heading,
  .answer-content,
  .ai-solution-copy,
  .quiz-list-copy,
  .community-board .board-main,
  .community-detail-toolbar,
  .community-fact-list,
  .community-manager-row,
  .note-card,
  .note-inspector,
  .profile-identity,
  .profile-activity-copy,
  .profile-activity-meta,
  .trophy-card,
  .class-notice-row,
  .class-document-row,
  .event-card,
  .inventory-card,
  .club-directory-item,
  .festival-review-row,
  .notification-card,
  .notification-peek-row,
  .auth-card
) :where(h1, h2, h3, h4, strong, b, p, small, span, time, label, dd, dt) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(
  .workspace-head-actions,
  .form-actions,
  .compact-actions,
  .media-actions,
  .event-actions,
  .question-detail-actions,
  .question-followup-actions,
  .community-detail-actions,
  .study-room-head-actions,
  .quiz-toolbar-actions,
  .quiz-card-actions,
  .quiz-live-actions,
  .shop-card-actions,
  .student-card-camera-actions,
  .document-viewer-actions,
  .ui-dialog-actions
) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .workspace-head-actions,
  .form-actions,
  .compact-actions,
  .media-actions,
  .event-actions,
  .question-detail-actions,
  .question-followup-actions,
  .community-detail-actions,
  .study-room-head-actions,
  .quiz-toolbar-actions,
  .quiz-card-actions,
  .quiz-live-actions,
  .shop-card-actions,
  .student-card-camera-actions,
  .document-viewer-actions,
  .ui-dialog-actions
) > :where(button, a, label, summary) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .workspace-head-actions,
  .form-actions,
  .compact-actions,
  .media-actions,
  .event-actions,
  .question-detail-actions,
  .question-followup-actions,
  .community-detail-actions,
  .study-room-head-actions,
  .quiz-toolbar-actions,
  .quiz-card-actions,
  .quiz-live-actions,
  .shop-card-actions,
  .student-card-camera-actions,
  .document-viewer-actions,
  .ui-dialog-actions
) > :where(button, a, label, summary) :where(span, strong, small) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Form controls and search rows may otherwise retain a browser intrinsic
   minimum width, especially in two-column forms. */
:where(
  .search-row,
  .home-search-row,
  .question-search-row,
  .community-search-row,
  .quiz-code-form,
  .wordmaster-jump,
  .question-filter-selects,
  .account-form-grid,
  .managed-account-form,
  .notice-compose-form,
  .class-form-primary,
  .class-homeroom-fields,
  .class-date-fields
) > :where(div, form, label, input, select, textarea, button, a, details) {
  min-width: 0;
  max-width: 100%;
}

:where(
  input,
  select,
  textarea,
  .input,
  .select,
  .textarea,
  .searchbox,
  .search-field,
  .compact-select,
  .note-title-input
) {
  max-width: 100%;
}

/* Replaced and generated media should remain inside their owning surface. */
:where(
  .question-image,
  .image-preview img,
  .note-thumb,
  .community-banner,
  .community-thumb-strip img,
  img.profile-banner-design,
  img.custom-banner-image,
  img.gift-card-image,
  .quiz-image-editor img,
  .quiz-list-card img,
  img.school-event-banner-image,
  .event-card img,
  .inventory-card img,
  img.trophy-image,
  .forum-document img,
  .forum-editor-prosemirror img,
  .answer-content img,
  .content-box img
) {
  max-width: 100%;
  height: auto;
}

.ai-graph-canvas canvas {
  max-width: 100%;
}

:where(
  .image-preview,
  .community-thumb-strip,
  .reward-image-previews,
  .quiz-image-editor,
  .ai-graph-card,
  .ai-graph-canvas
) {
  min-width: 0;
  max-width: 100%;
}

/* Wide semantic content scrolls locally. Do not suppress overflow on the
   page: users must be able to reach every cell, token, and equation. */
:where(
  .table-scroll,
  .forum-table-scroll,
  .forum-document,
  .forum-editor-prosemirror,
  .answer-content,
  .ai-solution-copy,
  .math-content,
  [data-math-render],
  .content-box,
  .document-preview-list,
  .analytics-day-table
) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .table-scroll,
  .forum-table-scroll,
  .forum-document,
  .forum-editor-prosemirror,
  .answer-content,
  .ai-solution-copy,
  .math-content,
  [data-math-render],
  .content-box,
  .document-preview-list,
  .analytics-day-table
) :where(table, pre, .katex-display) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(
  .forum-document,
  .forum-editor-prosemirror,
  .answer-content,
  .ai-solution-copy,
  .math-content,
  [data-math-render],
  .content-box
) .katex-display > .katex {
  min-width: max-content;
}

:where(
  .forum-document,
  .forum-editor-prosemirror,
  .answer-content,
  .ai-solution-copy,
  .content-box
) :where(code, a) {
  overflow-wrap: anywhere;
}

/* Dialogs remain reachable between notches, browser chrome, and the virtual
   keyboard; feature-owned interiors keep their own layout. */
:where(
  .ui-dialog-card,
  .document-viewer-modal,
  .admin-pdf-modal,
  .festival-scanner-modal,
  .festival-test-card,
  .welcome-moment-panel,
  .profile-more-popover
) {
  width: min(100%, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  /* Fixed bottom navigation must reserve content space without introducing a
     second phantom gap on desktop. */
  .app-shell {
    padding-bottom: calc(var(--polish-mobile-tab-h, 60px) + env(safe-area-inset-bottom) + 12px);
  }

  .mobile-tabbar {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: repeat(var(--mobile-tab-count, 5), minmax(0, 1fr));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(6px, env(safe-area-inset-left));
  }

  .mobile-tabbar > button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 2px;
  }

  .mobile-tabbar > button > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(
    .grid.two,
    .grid.three,
    .split,
    .inline-fields,
    .home-dashboard-grid,
    .community-shell,
    .note-layout,
    .account-settings-grid,
    .tutor-queue-grid,
    .event-detail-grid,
    .support-admin-grid,
    .quiz-editor-grid,
    .quiz-code-entry,
    .club-layout
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(
    .form-actions,
    .compact-actions,
    .media-actions,
    .event-actions,
    .question-detail-actions,
    .shop-card-actions,
    .student-card-camera-actions,
    .document-viewer-actions,
    .ui-dialog-actions
  ) {
    flex-wrap: wrap;
  }

  :where(
    .form-actions,
    .compact-actions,
    .media-actions,
    .event-actions,
    .question-detail-actions,
    .shop-card-actions,
    .student-card-camera-actions,
    .document-viewer-actions,
    .ui-dialog-actions
  ) > :where(button, a, label, summary) {
    flex: 1 1 min(160px, 100%);
  }

  :where(.nav, .primary-nav, .workspace-tabs, .feed-tab-row, .community-section-tabs, .quiz-section-tabs, .admin-section-tabs, .profile-primary-tabs) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}

@media (max-width: 430px) {
  /* Auto-fit tracks with desktop-sized minima can still overflow at narrow
     widths; only the known content grids are collapsed here. */
  :where(
    .quiz-grid,
    .event-grid,
    .reward-box-grid,
    .inventory-grid,
    .market-grid,
    .community-board-row,
    .enhanced-board-list,
    .community-list-row,
    .profile-activity-grid,
    .profile-community-grid,
    .activity-grid,
    .trophy-grid,
    .admin-panel-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(
    .workspace-head-actions,
    .form-actions,
    .compact-actions,
    .media-actions,
    .event-actions,
    .question-detail-actions,
    .community-detail-actions,
    .study-room-head-actions,
    .quiz-toolbar-actions,
    .shop-card-actions,
    .student-card-camera-actions,
    .document-viewer-actions,
    .ui-dialog-actions
  ) > :where(button, a, label, summary) {
    flex-basis: 100%;
    width: 100%;
  }

}

@media (max-width: 390px) {
  :where(.activity-stat-grid, .workspace-metrics, .compact-stats) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-followup-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .question-followup-actions > :where(div, span, small, button, a, label) {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .container {
    width: calc(100% - 16px);
  }

  :where(.workspace-page, .workspace-subpage, .panel, .question-card, .answer-card, .quiz-card, .notice-card) {
    max-width: 100%;
  }

  .mobile-tabbar {
    padding-right: max(3px, env(safe-area-inset-right));
    padding-left: max(3px, env(safe-area-inset-left));
  }

  .mobile-tabbar > button {
    padding-inline: 1px;
  }
}