/* Local public-page responsive repairs. Keep the approved desktop masthead and
   the editor's artwork coordinates/aspect ratios untouched. Load after page CSS. */
@media screen and (max-width: 820px) {
  :is(.flow-page, .project-page, .confirm-page, .proof-page, .order-page, .organizer-page, .help-page, .support-page, [data-size-guide]) :is(main, section, article, aside, fieldset, form, label) {
    min-width: 0;
  }

  :is(.flow-header, .project-header, .confirm-header, .proof-header, .order-header, .organizer-header, .help-header, .support-header, .size-guide-header) {
    flex-wrap: wrap;
    gap: 16px;
  }
  :is(.organizer-header, .help-header, .support-header, .size-guide-header) nav,
  .project-header-meta, .proof-header-links, .project-help-links {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
  }
  :is(.organizer-header, .help-header, .support-header, .size-guide-header) nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :is(.project-help-links, .project-header-meta, .proof-header-links) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }

  :is(.confirm-steps, .proof-steps, .order-steps) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.confirm-steps, .proof-steps, .order-steps) li {
    min-width: 0;
    grid-template-columns: 29px minmax(0, 1fr);
  }
  :is(.confirm-steps, .proof-steps, .order-steps) :is(span, small) {
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  :is(.flow-page, .project-page, .confirm-page, .proof-page, .order-page, .organizer-page, .help-page, .support-page, [data-size-guide]) :is(h1, h2, h3, legend) {
    overflow-wrap: anywhere;
  }
  :is(.flow-page, .project-page, .confirm-page, .proof-page, .order-page, .organizer-page, .help-page, .support-page, [data-size-guide]) :is(button:not(.ulpe-layer), select, textarea, input:not([type="file"]):not([type="checkbox"]):not([type="radio"])) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  :is(.flow-page, .project-page, .confirm-page, .proof-page, .order-page, .organizer-page, .help-page, .support-page, [data-size-guide]) button:not(.ulpe-layer) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .help-intro, .organizer-login, .organizer-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .help-intro, .help-bottom, .organizer-login {
    gap: 28px;
  }
  .organizer-case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.organizer-center-heading, .organizer-detail-heading, .qa-results-heading, .proof-board > header, .next-confirmation) {
    flex-wrap: wrap;
  }
  .organizer-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .organizer-progress li {
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
  :is(.organizer-metrics, .organizer-deposit-summary) > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  :is(.panel-actions, .artwork-controls, .proof-comparison-toolbar, .proof-side-buttons, .flow-size-services, .size-guide-actions, .order-size-links, .vote-completion-actions) {
    flex-wrap: wrap;
  }
  .request-action, .quote-request:has(.organizer-proof-review) .request-action {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .proof-version-field, .proof-original-selector {
    min-width: 0;
    max-width: 100%;
  }
  .proof-file-name, .details-summary dd, .organizer-message,
  .confirmation-state, .project-navigation-notice, .project-share-status,
  .order-form :is(p, small), .fitting-policy :is(p, li) {
    overflow-wrap: anywhere;
  }
  .flow-page .recommendation {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow-page .recommendation > span {
    justify-self: start;
  }
  .ulpe .ulpe-workspace, .ulpe .ulpe-selectors {
    grid-template-columns: minmax(0, 1fr);
  }
  .ulpe .ulpe-preview {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }

  /* Keep all size/quantity columns visible, including custom headings. */
  .size-guide-table, .order-size-table-wrap {
    overflow: visible;
  }
  .size-guide-table table, .order-size-table {
    width: 100%;
    table-layout: fixed;
  }
  .size-guide-table th, .size-guide-table td {
    padding: 10px 4px;
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .order-size-table th, .order-size-table td {
    padding: 10px 6px;
    font-size: 15px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .order-size-table input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 8px 5px;
  }
}

@media screen and (max-width: 620px) {
  :is(.help-header, .support-header, .size-guide-header, .organizer-header) {
    align-items: flex-start;
    flex-direction: column;
  }
  :is(.help-header, .support-header, .size-guide-header, .organizer-header) nav,
  .proof-header-links, .project-header-meta, .project-help-links {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
  .organizer-header nav a {
    display: inline-flex;
  }
  :is(.help-header, .support-header, .size-guide-header, .organizer-header) nav {
    gap: 6px 16px;
  }
  .guide-role-buttons, .qa-search-panel, .fitting-contact-grid,
  .organizer-case-list, .vote-completion-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-jump {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-jump a {
    border-right: 1px solid #b8c39c;
    border-bottom: 1px solid #b8c39c;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .guide-jump a:nth-child(3) {
    border-right: 1px solid #b8c39c;
  }
  .guide-jump a:nth-child(even) {
    border-right: 0;
  }
  .guide-jump a:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .guide-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }
  .guide-step-number {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  .guide-step:not(:last-child)::after {
    top: 32px;
    left: 15px;
  }
  .guide-step:not(:last-child)::before {
    left: 10px;
  }
  .guide-step summary {
    padding: 17px 12px;
    align-items: flex-start;
  }
  .guide-step summary > span, .qa-item summary > :first-child {
    min-width: 0;
  }
  .guide-step h2 {
    font-size: 21px;
  }
  .guide-step-content {
    padding: 0 12px 20px;
  }
  .guide-step-content :is(p, li) {
    overflow-wrap: anywhere;
  }
  .guide-step-content ul, .guide-step-content ol {
    padding-left: 22px;
  }
  .guide-step-content .guide-package-list {
    padding-left: 0;
  }
  .guide-route-grid section, .help-bottom, .qa-search-panel,
  .organizer-login, .organizer-case-detail {
    padding: 18px;
  }
  .organizer-login-forms {
    padding: 14px;
  }
  .organizer-detail-heading, .organizer-center-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .organizer-action-card .organizer-primary {
    gap: 12px;
    padding-inline: 13px;
  }
  .organizer-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .organizer-metrics div:last-child {
    grid-column: 1 / -1;
  }
  .builder-aside .progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .builder-aside .progress li {
    gap: 7px;
  }
  .builder-aside .progress li::before {
    display: none;
  }
  .builder-aside .progress span {
    font-size: .78rem;
    line-height: 1.6;
  }
  .builder-main {
    padding-inline: 16px;
  }
  .flow-launch-offer, .route-options, .settings-grid, .organizer-fields,
  .builder-size-services, .ulpe .ulpe-methods, .ulpe .ulpe-packages,
  .ulpe .ulpe-add-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow-launch-offer > span {
    justify-self: start;
  }
  .ulpe {
    padding: 13px;
  }
  .ulpe .ulpe-option > span, .ulpe .ulpe-package-copy,
  .ulpe .ulpe-method-copy {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .ulpe .ulpe-mini-shirt {
    width: clamp(48px, 18vw, 82px);
  }
  .ulpe .ulpe-package-side {
    min-width: 0;
  }
  .ulpe .ulpe-position-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel-actions, .next-confirmation {
    align-items: stretch;
    flex-direction: column;
  }
  .panel-actions .flow-button, .next-confirmation button,
  .flow-size-services > *, .vote-completion-actions > * {
    width: 100%;
    justify-content: space-between;
  }
  .winner-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .winner-art {
    width: 126px;
  }
  .confirm-garments {
    grid-template-columns: minmax(0, 1fr);
  }
  .confirm-garment small {
    display: block;
  }
  .proof-garments {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .proof-image-frame {
    min-height: 0;
  }
  .proof-image-message {
    padding: 12px;
    overflow-wrap: anywhere;
  }
  .proof-side-buttons {
    width: 100%;
  }
  .proof-side-buttons button {
    flex: 1 1 0;
    padding-inline: 12px;
  }
  .size-guide-actions > * {
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .size-guide-header, .size-guide-main {
    width: calc(100% - 32px);
  }
  .size-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .order-size-table th:first-child {
    width: 22%;
  }
  .order-size-table th:nth-child(2) {
    width: 38%;
  }
  .vote-dock {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .vote-dock button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}