/*
 * Responsive additions only.
 *
 * The completed desktop UI remains the source of truth. Every visual rule in
 * this file is deliberately contained in a max-width query so viewports wider
 * than 1130px keep the existing template CSS unchanged.
 *
 * Project breakpoints:
 * - tablet and below: 1130px (the four 218px home columns, three 70px gaps,
 *   and 24px body margins stop fitting below this content boundary)
 * - smartphone:      640px (matches the most common existing page boundary)
 */

@media screen and (max-width: 1130px) {
  body[data-page],
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after {
    box-sizing: border-box;
  }

  body[data-page] {
    overflow-wrap: anywhere;
  }

  body[data-page] :where(img, video, canvas, svg) {
    max-width: 100%;
    height: auto;
  }

  body[data-page] :where(input, select, textarea) {
    max-width: 100%;
  }

  body[data-page] :where(.wrap, .shell, .panel, .card, .box, .paper, .paperBox) {
    min-width: 0;
  }

  body[data-page] :where(.tableWrap, .table-wrap, .previewTableWrap, .inputScroll, .scroll) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Home: keep the desktop four-column composition above this breakpoint. */
  body[data-page="home"] .cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--home-col-width)));
    gap: 24px 48px;
  }

  body[data-page="home"] .authArea {
    padding-right: 0;
  }

  body[data-page="home"] .visitorEventBanner {
    width: 100%;
  }

  /* Exam creation and preview pages use a single readable column on tablet. */
  body[data-page="web_exam"] .wrap,
  body[data-page="data_accum"] .wrap,
  body[data-page="subbook_manage"] .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="web_exam"] .wrap {
    gap: 12px;
  }

  body[data-page="subbook"] .layout {
    flex-direction: column;
  }

  body[data-page="subbook"] .layout > .panel {
    flex: 0 0 auto;
    width: 100%;
    max-height: min(70vh, 680px);
    max-height: min(70dvh, 680px);
    overflow: auto;
    overscroll-behavior-inline: contain;
  }

  body[data-page="subbook"] :where(.smallTable, .subTable) {
    min-width: 520px;
  }

  body[data-page="spelling_web_exam"] .paper .row,
  body[data-page="meaning_web_exam"] .paper .row {
    flex-wrap: wrap;
  }

  body[data-page="spelling_web_exam"] .paper .meaning {
    min-width: 0;
  }

  body[data-page="spelling_web_exam"] .paper .gap {
    display: none;
  }

  body[data-page="spelling_web_exam"] .paper input.ans,
  body[data-page="meaning_web_exam"] .paper input.ans {
    width: min(100%, 320px);
  }

  /* Plan and marketplace: two cards on tablet, no information is hidden. */
  body[data-page="plan"] .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="plan"] .modal-card,
  body[data-page="vocab_market_detail"] :where(.vm-duplicate-dialog, .vm-purchase-dialog) {
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
  }

  body[data-page="vocab_market"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Usage and account pages retain their content hierarchy on narrower widths. */
  body[data-page="usage"] .conceptGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="mypage"] .wrap,
  body[data-page="usage"] .wrap,
  body[data-page="usage_details"] .wrap {
    width: 100%;
  }

  /* Admin tables stay tables and scroll within their own bounded region. */
  body[data-page^="admin_"] {
    width: auto;
  }

  body[data-page^="admin_"] :where(.tableWrap, .previewTableWrap) {
    width: 100%;
  }

  body[data-page^="admin_"] :where(.top, .toolbar, .searchRow, .navRow, .actions) {
    min-width: 0;
  }
}

/* Tablet touch sizing is applied only when the primary pointer is coarse. */
@media screen and (max-width: 1130px) and (pointer: coarse) {
  body[data-page] :where(button, .btn, input[type="button"], input[type="submit"]) {
    min-height: 42px;
  }
}

@media screen and (max-width: 640px) {
  body[data-page] {
    margin: 14px;
  }

  body[data-page] :where(h1) {
    max-width: 100%;
    font-size: clamp(22px, 7vw, 25px);
    line-height: 1.25;
  }

  body[data-page] :where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"]) {
    min-height: 44px;
  }

  body[data-page] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
  ) {
    min-height: 44px;
  }

  body[data-page] :where(.top, .topRow, .topbar, .navRow, .toolbar, .searchRow, .actions, .buyRow) {
    max-width: 100%;
  }

  /* Home */
  body[data-page="home"] .authArea {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  body[data-page="home"] .authArea > :where(.btn, button) {
    width: 100%;
    text-align: center;
  }

  body[data-page="home"] .authArea .userName,
  body[data-page="home"] .authArea .topUtilityActions {
    grid-column: 1 / -1;
  }

  body[data-page="home"] .authArea .topUtilityActions {
    display: flex;
    justify-content: flex-end;
    margin-left: 0;
    width: 100%;
  }

  body[data-page="home"] .cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    width: 100%;
  }

  body[data-page="home"] .col {
    width: 100%;
    gap: 10px;
  }

  body[data-page="home"] .col > :where(.btn, .headBox) {
    width: 100%;
    text-align: center;
  }

  body[data-page="home"] .spacer {
    display: none;
  }

  body[data-page="home"] .visitorEventBanner,
  body[data-page="home"] .visitorEventBannerCopy {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="home"] .visitorEventBanner .btn {
    width: 100%;
    text-align: center;
  }

  body[data-page="home"] :where(.visitorEventModalBackdrop, .modal-backdrop) {
    align-items: flex-end;
    padding: 10px;
  }

  body[data-page="home"] :where(.visitorEventModal, .modal-panel) {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  body[data-page="home"] .business-footer {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Sign-in, sign-up and recovery forms */
  body:is(
    [data-page="login"],
    [data-page="signup"],
    [data-page="find_email"],
    [data-page="password_reset"],
    [data-page="password_reset_request"],
    [data-page="complete-profile"]
  ) {
    width: auto;
    margin: 14px;
  }

  body:is(
    [data-page="login"],
    [data-page="signup"],
    [data-page="find_email"],
    [data-page="password_reset"],
    [data-page="password_reset_request"],
    [data-page="complete-profile"]
  ) .field input {
    width: 100%;
    max-width: none;
    min-height: 44px;
  }

  body:is([data-page="signup"], [data-page="complete-profile"]) :where(.phoneActions, .phoneRow, .verificationRow) {
    align-items: stretch;
    flex-direction: column;
    max-width: none;
  }

  body:is([data-page="signup"], [data-page="complete-profile"]) :where(.phoneActions, .phoneRow, .verificationRow) > * {
    width: 100%;
  }

  body[data-page="login"] .modalBackdrop,
  body[data-page="signup_event_public"] .signupChoiceBackdrop {
    align-items: flex-end;
    padding: 10px;
  }

  body[data-page="login"] .modalPanel,
  body[data-page="signup_event_public"] .signupChoiceDialog {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  /* Data accumulation */
  body[data-page="data_accum"] :where(.topRow, .collectionRow, .msgWrap, .examControls) {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="data_accum"] :where(.topRow > button, .topRow > a, .collectionRow > button, .collectionRow select) {
    width: 100%;
  }

  body[data-page="data_accum"] .collectionRow select {
    min-width: 0;
  }

  body[data-page="data_accum"] .msgLabel {
    min-width: 0;
  }

  body[data-page="data_accum"] .examFrameBox {
    padding: 10px;
  }

  body[data-page="data_accum"] .paper .row {
    flex-wrap: wrap;
  }

  body[data-page="data_accum"] .paper .examMeaning {
    flex-basis: calc(100% - 48px);
    min-width: 0;
  }

  body[data-page="data_accum"] .paper .gap {
    display: none;
  }

  body[data-page="data_accum"] .paper input.ans {
    width: calc(100% - 48px);
    margin-left: 48px;
  }

  body[data-page="data_accum"] :where(.modalBack, .pick-list) {
    padding: 10px;
  }

  body[data-page="data_accum"] .modalBox {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  /* Subbooks */
  body[data-page="subbook"] :where(.topbar, .searchRow, .sortRow, .collectionPickerRow, .subActions, .msgWrap) {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="subbook"] :where(.topbar > button, .searchRow > button, .searchRow > input, .sortRow > button, .collectionPickerRow select, .subActions > button) {
    width: 100%;
  }

  body[data-page="subbook"] .sortSpacer {
    display: none;
  }

  body[data-page="subbook"] .msgLabel {
    min-width: 0;
  }

  body[data-page="subbook"] .panel {
    min-width: 0;
  }

  body[data-page="subbook_manage"] :where(.topbar, .headTop, .headLeft, .headRight, .belowRow, .examControls) {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="subbook_manage"] :where(.topbar > button, .headLeft > button, .headRight > button, .belowRow > button) {
    width: 100%;
  }

  body[data-page="subbook_manage"] .paper .row {
    flex-wrap: wrap;
  }

  body[data-page="subbook_manage"] .paper .meaning {
    min-width: 0;
  }

  body[data-page="subbook_manage"] .paper .gap {
    display: none;
  }

  body[data-page="subbook_manage"] .paper input.ans {
    width: min(100%, 320px);
  }

  body[data-page="subbook_manage"] .modalBox {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  /* Exam pages and print previews */
  body:is(
    [data-page="web_exam"],
    [data-page="meaning_web_exam"],
    [data-page="spelling_web_exam"],
    [data-page="print"],
    [data-page="meaning_print"],
    [data-page="spelling_print"]
  ) {
    margin: 0;
  }

  body:is(
    [data-page="web_exam"],
    [data-page="meaning_web_exam"],
    [data-page="spelling_web_exam"],
    [data-page="print"],
    [data-page="meaning_print"],
    [data-page="spelling_print"]
  ) .topbar :where(label, button, select) {
    width: 100%;
    float: none !important;
    margin-left: 0 !important;
  }

  body[data-page="print"] .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-page="meaning_print"], [data-page="spelling_print"]) .paperBox .row {
    flex-wrap: wrap;
  }

  body[data-page="meaning_print"] .paperBox .word,
  body[data-page="spelling_print"] .paperBox .meaning {
    width: calc(100% - 50px);
  }

  body[data-page="meaning_print"] .meaningBox,
  body[data-page="spelling_print"] .spellingBox {
    width: calc(100% - 50px);
    margin-left: 50px;
  }

  /* Plan, marketplace and event flows */
  body[data-page="plan"] .top,
  body[data-page="vocab_market"] .top,
  body[data-page="vocab_market_detail"] .top {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="plan"] .top > .btn,
  body[data-page="vocab_market"] .navRow .btn,
  body[data-page="vocab_market_detail"] .navRow .btn {
    text-align: center;
  }

  body[data-page="plan"] .plan-grid,
  body[data-page="vocab_market"] .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="plan"] :where(.checkout-wrap, .plan-card) {
    padding: 16px;
  }

  body[data-page="plan"] .opt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="plan"] .opt-row label {
    min-height: 44px;
  }

  body[data-page="plan"] :where(.modal-overlay, .vm-purchase-backdrop) {
    align-items: flex-end;
    padding: 10px;
  }

  body[data-page="plan"] .modal-card,
  body[data-page="vocab_market_detail"] :where(.vm-duplicate-dialog, .vm-purchase-dialog) {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 18px 16px;
  }

  body[data-page="plan"] .modal-actions,
  body[data-page="vocab_market_detail"] :where(.vm-duplicate-actions, .vm-purchase-actions) {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="plan"] .modal-actions .btn,
  body[data-page="vocab_market_detail"] :where(.vm-duplicate-actions, .vm-purchase-actions) .btn {
    width: 100%;
  }

  body[data-page="vocab_market"] .filterRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="vocab_market"] .filterRow :where(select, button) {
    width: 100%;
  }

  body[data-page="vocab_market_detail"] .buyRow {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="vocab_market_detail"] .buyRow .btn {
    width: 100%;
    text-align: center;
  }

  body[data-page="vocab_market_detail"] .vm-payment-method-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="signup_event_public"] .signupChoiceBackdrop,
  body[data-page="vocab_market_detail"] :where(.vm-duplicate-backdrop, .vm-purchase-backdrop) {
    align-items: flex-end;
    padding: 10px;
  }

  /* Usage and my page */
  body:is([data-page="usage"], [data-page="usage_details"], [data-page="mypage"]) .top {
    align-items: stretch;
    flex-direction: column;
  }

  body:is([data-page="usage"], [data-page="usage_details"], [data-page="mypage"]) .top .btn {
    text-align: center;
  }

  body[data-page="usage"] .conceptGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-page="usage"], [data-page="usage_details"], [data-page="mypage"]) .card {
    padding: 16px;
  }

  body[data-page="mypage"] :where(.grid, .scheduledPlanGrid, .eventBenefitGrid) {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  body[data-page="mypage"] :where(.grid .v, .scheduledPlanValue) {
    margin-bottom: 10px;
  }

  body[data-page="mypage"] .planSectionHead {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="mypage"] .planSectionHead .btn {
    width: 100%;
    text-align: center;
  }

  body[data-page="password_change"] .actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="password_change"] .actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Admin */
  body[data-page^="admin_"] {
    margin: 14px;
  }

  body[data-page^="admin_"] :where(.top, .toolbar, .searchRow, .navRow, .actions, .giftBar) {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page^="admin_"] :where(.toolbar input, .searchRow input, .filterSel) {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body[data-page^="admin_"] :where(.top .btn, .toolbar .btn, .searchRow .btn, .actions .btn, .navRow .btn) {
    width: 100%;
    text-align: center;
  }

  body[data-page="admin_home"] .grid,
  body[data-page="admin_vocab_product_edit"] :where(.row2, .previewWrap) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="admin_events"] .meta,
  body[data-page="admin_test_accounts"] .credential dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  body[data-page^="admin_"] :where(.userNoteModal, .planHistoryModal) {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  /* Payment result pages */
  body:is(
    [data-page="payment_success"],
    [data-page="payment_fail"],
    [data-page="payment_billing_success"],
    [data-page="payment_billing_fail"]
  ) {
    width: auto;
  }
}