/* Content layouts for touch screens. The responsive shell lives separately. */
@media (max-width: 900px) {
  #main .button,
  #main .people-button,
  #main .journey-button,
  #main .journey-follow,
  #main .home-retry,
  #main .polling-search > button,
  #main .polling-empty > button,
  #main .home-search > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1.4;
    white-space: normal;
  }

  /* Preserve native radio/checkbox sizing and their full label hit areas. */
  #main form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #main form select,
  #main form textarea,
  #main .assistant-connection input,
  dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  dialog select,
  dialog textarea,
  #account-dialog .session-box select,
  .more-page .session-box select {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  #main form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #main form select,
  dialog input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  dialog select,
  #account-dialog .session-box select,
  .more-page .session-box select {
    min-height: 44px;
  }

  #main form textarea,
  dialog textarea { line-height: 1.6; }

  #main .poll-option { min-height: 56px; line-height: 1.6; }
  #main .poll-option input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
  #main .poll-option > span { min-width: 0; overflow-wrap: anywhere; }
  #main .panel form label.poll-option { display: flex; font-size: 14px; }

  #main details > summary { min-height: 44px; line-height: 1.6; }
  #main .quiet-section > summary,
  #main .people-filter > summary,
  #main .lobby-subdetails > summary,
  #main .person-candidate-provenance > summary,
  #main .journey-tool > summary { padding-top: 12px; padding-bottom: 12px; }

  #main .record-tools,
  #main .person-tools,
  #main .explore-row-actions,
  #main .assistant-source .actions { gap: 4px 18px; flex-wrap: wrap; }
  #main .record-tools button,
  #main .person-tools a,
  #main .person-tools button,
  #main .explore-row-actions a,
  #main .explore-row-actions button,
  #main .assistant-source .actions a,
  #main .home-poll-all,
  #main .people-feed > a,
  #main .person-source-link > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.5;
  }

  #main .explore-search-toggle,
  #main .explore-search .search-box button { min-width: 44px; min-height: 44px; }
  #main .recent-searches-heading button { min-width: 44px; min-height: 44px; }
  #main .people-pagination,
  #main .pagination { flex-wrap: wrap; gap: 12px; }
  #main .pagination > div { flex-wrap: wrap; }

  /* Source text stays complete and follows the available column width. */
  #main .detail-header,
  #main .panel,
  #main .detail-grid > div,
  #main .detail-grid > aside,
  #main .source-paragraph > p,
  #main .person-action > div,
  #main .journey-representative-result > span { min-width: 0; }
  #main .panel,
  #main .detail-header,
  #main .card,
  #main .source-description,
  #main .source-value,
  #main .source-paragraph,
  #main .people-row-text,
  #main .journey-row,
  #main .assistant-source { overflow-wrap: anywhere; }
  #main .result-label { gap: 12px; line-height: 1.6; }
  #main .result-label > span { min-width: 0; }
  #main .result-label > strong { flex-shrink: 0; }
  #main .journey-index-row .journey-note { flex-wrap: wrap; gap: 5px 12px; }

  dialog {
    max-width: 580px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
  }
  dialog .dialog-heading { align-items: flex-start; gap: 12px; }
  dialog .dialog-heading h2 { min-width: 0; overflow-wrap: anywhere; }
  dialog .icon-button { min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 2px; }
  dialog .button { min-height: 44px; line-height: 1.5; white-space: normal; }
  dialog p { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  /* Comfortable reading sizes without expanding the desktop information density. */
  #main .panel p,
  #main .panel li,
  #main .page-heading p,
  #main .detail-header > p,
  #main .notice,
  #main .error,
  #main .people-intro p,
  #main .people-empty,
  #main .people-error,
  #main .person-section-body,
  #main .person-facts,
  #main .lobby-report-body,
  #main .journey-section-body,
  #main .journey-heading > p:last-child,
  #main .journey-index-intro p,
  #main .polling-empty,
  #main .polling-about p,
  #main .home-empty,
  #main .recent-search-empty,
  #main .saved-note,
  #main .explore-record-status,
  #main .explore-record .explore-status,
  #main .saved-record .explore-status,
  #main .explore-record .record-status,
  #main .saved-record .record-status { font-size: 14px; line-height: 1.75; }

  #main .button,
  #main .people-button,
  #main .journey-button,
  #main .journey-follow,
  #main .home-retry,
  #main .home-search > button,
  #main .polling-search > button,
  #main .polling-empty > button,
  #main .explore-search > button,
  #main .explore-search form > button { font-size: 14px; }

  #main .home-section-heading,
  #main .polling-section-heading,
  #main .recent-searches-heading { align-items: flex-start; }
  #main .home-section-heading > a,
  #main .polling-section-heading > a,
  #main .home-header-links a,
  #main .home-overview-header > a,
  #main .polling-overview-header > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.5;
  }
  #main .home-header-links { flex-wrap: wrap; gap: 2px 12px; justify-content: flex-end; }
  #main .home-section-heading p,
  #main .polling-section-heading p,
  #main .recent-searches-heading p,
  #main .home-search-status,
  #main .polling-search-status,
  #main .explore-search-status,
  #main .people-status { font-size: 13px; line-height: 1.6; }
  #main .home-addition-source,
  #main .home-addition-meta,
  #main .polling-addition-meta,
  #main .recent-search-list small,
  #main .home-poll-mobile .home-poll-meta,
  #main .home-poll-mobile .home-poll-state,
  #main .home-poll-mobile .home-poll-total,
  #main .home-poll-mobile .home-poll-notice { font-size: 12px; line-height: 1.65; }
  #main .home-addition h3,
  #main .polling-addition h3,
  #main .recent-search-list strong { font-size: 16px; }
  #main .home-addition h3 a { display: block; padding-block: 5px; }
  #main .polling-addition > p { font-size: 13px; }
  #main .polling-about > summary,
  #main .recent-searches-heading button { font-size: 13px; }
  #main .home-poll-mobile > summary { padding-block: 7px; }
  #main .home-poll-mobile > summary > span { margin-left: 0; font-size: 12px; }
  #main .home-poll-mobile .home-poll-result { font-size: 13px; }

  #main .people-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    overflow: visible;
  }
  #main .people-tabs a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 48px;
    min-width: 0;
    padding: 11px 8px;
    font-size: 13px;
    line-height: 1.5;
  }
  #main .people-row-text strong { font-size: 16px; }
  #main .people-row-text > span { font-size: 14px; line-height: 1.6; }
  #main .people-row-text small,
  #main .people-filter,
  #main .people-filter label,
  #main .lobby-registry-filter,
  #main .person-kicker,
  #main .person-place,
  #main .person-party,
  #main .person-note,
  #main .person-match-note,
  #main .person-facts dt,
  #main .person-source-link p,
  #main .person-components,
  #main .people-feed p,
  #main .lobby-report > summary small,
  #main .lobby-report > summary > span > span,
  #main .lobby-report-section li > small,
  #main .lobby-report-section li > span,
  #main .lobby-subdetails > p,
  #main .lobby-group-note { font-size: 12px; line-height: 1.75; }
  #main .person-note { font-size: 12px !important; }
  #main .person-tools a,
  #main .person-tools button,
  #main .person-section-body a,
  #main .people-feed a,
  #main .lobby-report-body a { font-size: 14px; }
  #main .person-role { font-size: 16px; }
  #main .person-section > summary,
  #main .lobby-report > summary strong,
  #main .person-financial-record h3,
  #main .person-lobby-record h3 { font-size: 15px; }
  #main .person-section > summary small { font-size: 11px; max-width: 110px; }
  #main .person-section > summary > span { min-width: 0; }
  #main .person-components dt small { font-size: 11px; }
  #main .person-components > div { gap: 12px; }
  #main .lobby-record-group > h2 { font-size: 15px; flex-wrap: wrap; }
  #main .lobby-record-group > h2 small { font-size: 12px; }
  #main .lobby-report-section h4,
  #main .lobby-subdetails > summary,
  #main .people-feed h3 { font-size: 13px; }
  #main .lobby-provenance .person-facts,
  #main .lobby-provenance .person-facts dt { font-size: 12px; }
  #main .people-coverage-details > summary,
  #main .person-candidate-provenance > summary { font-size: 13px; }

  #main .place-tabs { padding-inline: 0; }
  #main .place-tabs button,
  #main .place-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 5px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: normal;
  }
  #main .explore-row-actions a,
  #main .explore-row-actions button,
  #main .record-tools button { font-size: 13px; }
  #main .explore-record h2,
  #main .saved-record h2 { font-size: 17px; }
  #main .explore-record-meta,
  #main .explore-record .explore-meta,
  #main .saved-record .explore-meta,
  #main .explore-record .record-meta,
  #main .saved-record .record-meta,
  #main .explore-pagination,
  #main .explore-breadcrumb { font-size: 12px; }
  #main .explore-breadcrumb a,
  #main .explore-breadcrumb button { min-height: 44px; display: inline-flex; align-items: center; }
  #main .explore-breadcrumb { padding-block: 6px; }
  #main .explore-pagination > div { flex-wrap: wrap; }
  #main .list-heading { flex-wrap: wrap; }
  #main .tabs button,
  #main .civic-case-tabs button { min-height: 44px; font-size: 13px; }
  #main .meta-list dt,
  #main .source-label { font-size: 12px; }
  #main .meta-list dd,
  #main .source-value,
  #main .source-description,
  #main .result-label { font-size: 14px; }
  #main .hash { font-size: 12px; }
  #main .panel form label { font-size: 14px; }

  #main .assistant-message,
  #main .assistant-welcome > p,
  #main .assistant-heading p,
  #main .assistant-connection p,
  #main .assistant-boundaries p,
  #main .assistant-claim details,
  #main .assistant-limits { font-size: 14px; line-height: 1.8; }
  #main .assistant-question { margin-left: 0; }
  #main .assistant-context,
  #main .assistant-source p,
  #main .assistant-discovery > p,
  #main .assistant-discovery-links small,
  #main .assistant-status-summary,
  #main .assistant-privacy,
  #main .assistant-answer-label small,
  #main .assistant-form-actions > span { font-size: 12px; line-height: 1.7; }
  #main .assistant-form-actions { justify-content: stretch; gap: 8px; }
  #main .assistant-form-actions > span { flex-basis: 100%; margin-right: 0; }
  #main .assistant-form-actions .button { flex: 1 1 110px; font-size: 13px; }
  #main .assistant-suggestions button { min-height: 48px; font-size: 14px; }
  #main .assistant-context a,
  #main .assistant-privacy .text-button { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
  #main .assistant-citation { display: inline-block; padding: 8px 4px; font-size: 12px; white-space: normal; }
  #main .assistant-source h3 { font-size: 15px; }
  #main .assistant-source-label { font-size: 11px; }
  #assistant-question { min-height: 96px; font-size: 16px; }
  #assistant-status-message { margin-inline: 0; font-size: 13px; }
  #main .assistant-footnote { font-size: 12px !important; }

  #main .journey-section > summary { font-size: 15px; }
  #main .journey-section > summary > span { min-width: 0; }
  #main .journey-section > summary small { font-size: 11px; max-width: 105px; }
  #main .journey-steps button { min-height: 60px; font-size: 12px; line-height: 1.5; }
  #main .journey-note { font-size: 12px !important; }
  #main .journey-kicker,
  #main .journey-representative-result small,
  #main .journey-form-status { font-size: 12px !important; line-height: 1.7; }
  #main .journey-representative-result strong,
  #main .journey-section-body a,
  #main .journey-comparison-totals > div,
  #main .journey-result,
  #main .journey-timeline li > div > p:not(.journey-kicker) { font-size: 14px; }
  #main .journey-result strong,
  #main .journey-timeline h3 { font-size: 13px; }
  #main .journey-representative-result { flex-wrap: wrap; }
  #main .journey-row { flex-wrap: wrap; }
  #main .journey-row > a { flex: 1 1 160px; }
  #main .journey-index-tabs a { min-height: 44px; font-size: 13px; }
  #main .journey-search { align-items: stretch; }
  #main .journey-search input { flex: 1; }
  #main .journey-search .journey-button { flex-shrink: 0; }
  #main .source-paragraph { gap: 10px; }
  #main .source-paragraph > a { min-width: 30px; font-size: 13px; }

  #main .more-link { min-height: 64px; }
  #main .more-link small,
  #main .more-page .session-box p { font-size: 13px; line-height: 1.7; }
  #main .quiet-section > summary { font-size: 14px; }
  #account-dialog .session-box label { font-size: 14px; }
  #account-dialog .session-box p { font-size: 13px; }
}

@media (max-width: 380px) {
  #main .home-section-heading,
  #main .polling-section-heading { flex-wrap: wrap; gap: 2px; }
  #main .home-section-heading > a,
  #main .polling-section-heading > a { min-height: 44px; }
  #main .people-filter > div { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  #main .people-filter label { grid-row: auto; }
  #main .person-facts > div,
  #main .lobby-report .person-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #main .person-facts dd { padding-bottom: 3px; }
  #main .person-section > summary small,
  #main .journey-section > summary small { max-width: 82px; }
  #main .person-action { flex-wrap: wrap; gap: 5px; }
  #main .person-amount > span { display: block; margin-left: 0; }
  #main .lobby-registry-filter { flex-wrap: wrap; gap: 6px; }
  #main .lobby-registry-filter select { width: 100%; max-width: 100%; }
  #main .pagination > div { width: 100%; justify-content: space-between; }
  #main .journey-index-tabs { flex-wrap: wrap; }
}
