/* F156 / F181 / F182. Job editor titles, photo tile titles, field labels,
   and the Account, Refer, and Say-It Cards controls stay on one line.
   Layout only: full-width rows and wider boxes. Type stays at least 16px
   and is not reduced. Tap targets stay at least 44px. No ellipsis.
   Scoped to the job editor and the Account / Refer screens so it can merge
   beside other fixes. */

/* F156: the step title gets the whole card width. The number, Done pill
   and chevron share the row above it, so a long title is not squeezed
   into the gap beside the pill. */
.form-panel .acc-head:has(> .acc-titles) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "num done spacer chev" "titles titles titles titles";
  column-gap: 0.5rem;
  row-gap: 0.3rem;
  align-items: center;
}
.form-panel .acc-head:has(> .acc-titles) > .step-num { grid-area: num; }
.form-panel .acc-head:has(> .acc-titles) > .step-done { grid-area: done; margin: 0; justify-self: start; }
.form-panel .acc-head:has(> .acc-titles) > .acc-chev { grid-area: chev; }
.form-panel .acc-head:has(> .acc-titles) > .acc-titles { grid-area: titles; min-width: 0; width: 100%; }
.form-panel .acc-head .step-title,
.form-panel .acc-head h2 {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* F181: Before / During / After and the proof-doc tiles each get a full-width
   row. A three-across row leaves the title about 150px, which wraps.
   The shell's wide-screen 3-column photo row is overridden here. */
.form-panel #step-4 .photo-grid-3,
html.ffs .form-panel #step-4 .photo-grid-3 {
  grid-template-columns: minmax(0, 1fr);
}
.form-panel .photo-grid-docs {
  grid-template-columns: minmax(0, 1fr);
}
.form-panel .snap-target-sm {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: start;
  padding: 0.45rem 0.85rem;
}
.form-panel .snap-target-sm .snap-title {
  font-size: max(1rem, 16px);
  line-height: 1.25;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.form-panel #step-4 .snap-target {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px 14px;
  text-align: center;
}
.form-panel #step-4 .snap-icon { flex: none; }
.form-panel #step-4 .snap-title,
.form-panel #step-4 .snap-sub {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}

/* F181: two-up field rows stack, so a label is not stuck in a half-width column. */
.form-panel .row-2 {
  grid-template-columns: minmax(0, 1fr);
}
.form-panel label:not(:has(input, textarea, select, canvas, .opt)),
.form-panel .check-inline > span,
.form-panel details > summary {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.form-panel details > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.35rem;
}
.form-panel summary .opt,
#crew-roles-heading .opt {
  white-space: nowrap;
  flex: 0 0 auto;
}
/* "(optional)" on other fields may sit on the next line. The words before
   it stay one line. */
.form-panel label:has(> .opt) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35rem;
  white-space: nowrap;
}
.form-panel label > .opt { white-space: nowrap; }
/* Drawn signature: the words stay one line. The optional tag always takes
   the line under them, so a long translation is not clipped beside it. */
.form-panel label:has(+ #sig-canvas) {
  flex-flow: row wrap;
  align-items: flex-start;
  row-gap: 0.1rem;
  max-width: 100%;
  white-space: nowrap;
}
.form-panel label:has(+ #sig-canvas) > .opt {
  flex: 1 0 100%;
  white-space: nowrap;
}
.form-panel .check-inline > span {
  min-width: max-content;
  flex: 1 0 auto;
}

/* F181: on a phone the editor side padding shrinks so a 16px label has the
   card width. The controls stay at least 44px tall. */
@media (max-width: 480px) {
  body:has(.form-panel) .wrap,
  html.ffs body:has(.form-panel) .wrap {
    padding-left: 8px;
    padding-right: 8px;
  }
  main.wrap section.form-panel,
  html.ffs main.wrap section.form-panel {
    padding-left: 0;
    padding-right: 0;
  }
  /* The job-type chips cancel the panel's side padding. With that padding
     gone, the same negative margin would stick out past the screen. */
  main.wrap section.form-panel .chip-grid-jobs {
    margin-inline: 0;
  }
  .form-panel .acc-head,
  .form-panel .acc-body {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .form-panel .docs-block,
  .form-panel .more-advanced,
  html.ffs .form-panel .more-advanced-body details.docs-block {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .form-panel .check-inline {
    margin-left: 0;
    width: 100%;
    gap: 0.35rem;
  }
}

/* F182: Say-It Cards heading. The words take the row; the 44px mark stays put.
   Size stays the button's own 1.25rem. */
#ff-saycards .ffs-fold {
  width: 100%;
  min-height: 44px;
  gap: 0.5rem;
}
#ff-saycards .ffs-fold-t {
  white-space: nowrap;
  overflow-wrap: normal;
  min-width: max-content;
  flex: 1 0 auto;
  line-height: 1.2;
}

/* F182: Account and Refer buttons. The label stays on one line. The pill
   stays at least 52px tall and at 1.05rem. Side padding tightens on a phone
   so the words get the width instead of the padding. */
body[data-page="account"] .ffs-btn,
body[data-page="refer"] .ffs-btn {
  box-sizing: border-box;
  white-space: nowrap;
  padding-inline: 12px;
  min-height: 52px;
  min-width: 0;
  max-width: 100%;
  font-size: max(1.05rem, 16px);
}
@media (max-width: 420px) {
  body[data-page="account"] .wrap,
  body[data-page="refer"] .wrap,
  html.ffs body[data-page="account"] .wrap,
  html.ffs body[data-page="refer"] .wrap {
    padding-left: 8px;
    padding-right: 8px;
  }
  body[data-page="account"] .ffs-card,
  body[data-page="refer"] .ffs-card {
    padding-inline: 10px;
  }
  body[data-page="account"] .ffs-btn,
  body[data-page="refer"] .ffs-btn {
    padding-inline: 8px;
    /* 1.05rem at 200% text is wider than the card in el, fr, ru and bg. 1rem (16px at 100%) grows with the text size; wordFit zooms a label that is still too wide, never below its 100% size (F310). */
    font-size: max(1rem, 16px);
  }
}

/* t446 overlap fix: the photo tiles (Before, During, After) are labels without an input inside, so the one-line label rule
   above made their words nowrap too. Three across at 200% text they ran into the next tile. The tile label itself goes back to
   normal wrapping; titles that must stay one line (#step-4, small tiles) keep their own nowrap rules. */
.form-panel label.snap-target { white-space: normal; }