/* F198 / F199. Share-link rows and selects stay inside the card.
   The optional marker sits on its own line. Headings, labels, checklist
   names and the next-step line stay one line at 16px on a phone and at a
   big text size. Fold marks stay inside the row. */

.form-panel .ff-link-opts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#ff-handoff,
#ff-handoff .cho-pick {
  max-width: 100%;
  min-width: 0;
}
.form-panel select,
.ff-link-sel,
.cho-sel,
.ffs-sel,
.wty-sel,
#support-form :is(input, textarea, select) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Optional marker on the line under the words, including the support topic. */
.form-panel :is(label, h2, h3, .step-title, .job-group-title, summary):has(> .opt),
#support-form label:has(> .opt) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 0.1rem;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}
#support-form label > .opt,
.form-panel :is(label, h2, h3, .step-title, .job-group-title, summary) > .opt {
  display: block;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

/* The native disclosure mark paints outside the row. Keep the tap on the summary. */
.form-panel details > summary {
  list-style: none;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}
.form-panel details > summary::-webkit-details-marker { display: none; }
#ff-saycards .ffs-fold {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#ff-saycards .ffs-fold-t {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
#ff-saycards .ffs-fold-i {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

/* Phone: these lines do not balance onto a second line. */
@media (max-width: 480px) {
  .phase-title > span:first-child,
  .cho-check > span,
  #phase-progress,
  #phase-next,
  .ff-link-lab,
  .form-panel .check-inline > span,
  .form-panel details > summary,
  #ff-saycards .ffs-fold-t,
  #support-form label,
  #support-form label > .opt {
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
    min-width: 0;
    line-height: 1.25;
  }
  #phase-next {
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cho-check {
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .cho-check > span,
  .phase-title > span:first-child,
  .form-panel .check-inline > span {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* F198: a fieldset sizes to its content. A nowrap job-type title
   (fr "Intervention de réparation / dépannage") grew the fieldset, the
   groups and the search input to 328px at 320. Hold them to the card. */
html .form-panel .chip-fieldset,
html .form-panel .job-type-groups,
html .form-panel .job-group,
html .form-panel .chip-grid,
html .form-panel .chip-grid-jobs {
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  box-sizing: border-box;
}
html .form-panel #job-type-filter,
html .form-panel #trade-filter {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
html .form-panel .job-group-title {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  box-sizing: border-box;
}
html .form-panel .chip-grid-jobs .chip,
html .form-panel .chip-grid-trades .chip {
  max-width: 100%;
  min-width: 44px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Big text: hold the same lines at 16px so the grown size cannot scroll the page. */
html.ff-tw-s .phase-title > span:first-child,
html.ff-tw-s .cho-check,
html.ff-tw-s .cho-check > span,
html.ff-tw-s #phase-progress,
html.ff-tw-s #phase-next,
html.ff-tw-s .phase-summary-text,
html.ff-tw-s .ff-link-lab,
html.ff-tw-s .ff-link-sel,
html.ff-tw-s .cho-sel,
html.ff-tw-s .form-panel .check-inline > span,
html.ff-tw-s .form-panel details > summary,
html.ff-tw-s #ff-saycards .ffs-fold-t,
html.ff-tw-s #support-form label,
html.ff-tw-s #support-form label > .opt,
html.ff-tw-s #page-h {
  font-size: max(16px, 1rem) !important;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
  min-width: 0;
}
html.ff-tw-s #phase-next {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.ff-tw-s .ff-link-sel,
html.ff-tw-s .cho-sel,
html.ff-tw-s .form-panel select {
  min-height: 44px;
  white-space: nowrap;
}
html.ff-tw-s .cho-check {
  flex-wrap: nowrap;
}
html.ff-tw-s .cho-check > span,
html.ff-tw-s .phase-title > span:first-child,
html.ff-tw-s .form-panel .check-inline > span,
html.ff-tw-s #ff-saycards .ffs-fold-t {
  flex: 1 1 auto;
  min-width: 0;
}

/* Big text on a wide screen: the three photo tiles get a full row each, so
   the Optional line under Before, During and After keeps its own line at
   16px and cannot run into the next tile. */
html.ff-tw-s .form-panel .photo-grid-3 {
  grid-template-columns: minmax(0, 1fr);
}
html.ff-tw-s .form-panel .snap-target .snap-sub {
  display: block;
  font-size: max(16px, 1rem) !important;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}