/* Job editor. The optional marker sits on its own line so it cannot widen
   the page. At a big text size, headings, labels and the team handoff title
   stay on one line at 16px instead of the grown size that scrolled sideways. */

.form-panel :is(label, h2, h3, .step-title, .job-group-title, summary):has(> .opt),
.profile-form label:has(> .opt),
.ff-brand 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;
  white-space: normal;
}
.form-panel :is(label, h2, h3, .step-title, .job-group-title, summary) > .opt,
.profile-form label > .opt,
.ff-brand label > .opt {
  display: block;
  max-width: 100%;
  line-height: 1.25;
  white-space: normal;
}
html.ff-tw-s .form-panel :is(label, h2, h3, .step-title, .job-group-title, summary) > .opt,
html.ff-tw-s .profile-form label > .opt,
html.ff-tw-s .ff-brand label > .opt,
html.ff-tw-s .opt {
  font-size: max(16px, 1rem) !important;
  line-height: 1.25;
  white-space: nowrap;
}

/* Big text: these lines stay one line at 16px. The old nowrap sat on the
   full grown size and pushed the page sideways. */
html.ff-tw-s .form-panel :is(h2, h3, .step-title),
html.ff-tw-s .form-panel label:not(:has(input[type="checkbox"], input[type="radio"])),
html.ff-tw-s .crew-add label,
html.ff-tw-s .ff-brand label,
html.ff-tw-s .form-panel .job-group-title,
html.ff-tw-s #crew-accept-form > .job-group-title,
html.ff-tw-s .ff-pay-h,
html.ff-tw-s #ff-join-h,
html.ff-tw-s .form-panel summary,
html.ff-tw-s .form-panel .snap-title,
html.ff-tw-s .form-panel .step-check-label,
html.ff-tw-s .form-panel .step-check-sub,
html.ff-tw-s .form-panel .check-inline > span,
html.ff-tw-s .profile-form label,
html.ff-tw-s .profile-heading,
html.ff-tw-s .job-group-title,
html.ff-tw-s #save-pill-text,
html.ff-tw-s .save-row .back-jobs,
html.ff-tw-s #ff-saycards .ffs-fold-t {
  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 .form-panel .check-inline > span,
html.ff-tw-s #ff-saycards .ffs-fold-t {
  flex: 1 1 auto;
  min-width: 0;
}
html.ff-tw-s .form-panel label :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
html.ff-tw-s .crew-add label :is(input, textarea, select),
html.ff-tw-s .ff-brand label :is(input, textarea, select) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
}
html.ff-tw-s .phase-title > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: max(16px, 1rem) !important;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  text-wrap: nowrap;
}
html.ff-tw-s .form-panel .btn,
html.ff-tw-s .finish-bar .btn,
html.ff-tw-s #btn-save-profile {
  max-width: 100%;
  min-height: 44px;
  font-size: max(16px, 1rem) !important;
  white-space: nowrap !important;
}
html.ff-tw-s .form-panel .step-next {
  width: 100%;
  box-sizing: border-box;
  padding-inline: 8px;
}
html.ff-tw-s .form-panel :is(input, textarea, select) {
  max-width: 100%;
  min-width: 0;
}
html.ff-tw-s .phase-add-row {
  max-width: 100%;
  min-width: 0;
}
html.ff-tw-s .phase-add-row input {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html.ff-tw-s .form-panel .step-check-btn {
  grid-template-areas: "box box" "label label" "sub sub";
}
html.ff-tw-s .form-panel .step-check-box { grid-area: box; justify-self: start; }
html.ff-tw-s .form-panel .step-check-label { grid-area: label; }
html.ff-tw-s .form-panel .step-check-sub { grid-area: sub; }
html.ff-tw-s .form-panel .acc-head,
html.ff-tw-s .form-panel .acc-body {
  padding-left: 6px;
  padding-right: 6px;
}
html.ff-tw-s .acc-head:has(> .acc-titles),
html.ff-tw-s .phase-top {
  column-gap: 6px;
  max-width: 100%;
}
html.ff-tw-s .form-panel .step-done,
html.ff-tw-s .form-panel .phase-pill {
  font-size: max(16px, 1rem) !important;
  white-space: nowrap;
  max-width: 100%;
}
html.ff-tw-s .form-panel .acc-head :is(h2, .step-title) {
  max-width: 100% !important;
}

html.ff-tw-s #cho-h {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 0.25rem;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

/* The invite heading has its own 1rem floor. Match that selector so 16px wins.
   Handoff item names and the closed-step summary stay one line inside the card. */
html.ff-tw-s .crew-add,
html.ff-tw-s #crew-accept-form {
  max-width: 100%;
  min-width: 0;
}
html.ff-tw-s .cho-check {
  max-width: 100%;
  min-width: 0;
  font-size: max(16px, 1rem) !important;
  flex-wrap: nowrap;
}
html.ff-tw-s .cho-check > span,
html.ff-tw-s .cho-pick > legend,
html.ff-tw-s .cho-lab,
html.ff-tw-s .cho-subh {
  font-size: max(16px, 1rem) !important;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}
html.ff-tw-s .acc-sum {
  font-size: max(16px, 1rem) !important;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap !important;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}