/* Canonical responsive host layout for Forms + JHA.
 * Generate corti-jha/public/form-layout.css with tools/sync-form-layout.mjs --update.
 * Keep DOM order, field contracts and engine logic unchanged. */
.responsive-form-page [hidden] { display: none !important; }
.responsive-form-page .container {
  width: 100%;
  max-width: 1280px;
  padding: 18px 20px 36px;
  gap: 12px;
}
.responsive-form-page :is(.field, .field-row, .select-wrap, .form-section, .client-field-gate) { min-width: 0; }
.responsive-form-page .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.responsive-form-page :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.responsive-form-page :is(header > div, .crew-item span) { min-width: 0; overflow-wrap: break-word; }
.responsive-form-page .crew-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.responsive-form-page .crew-item { min-width: 0; min-height: 44px; }
.responsive-form-page :is(.btn-back, .btn-secondary, .btn-add-row, .btn-add-step, .btn-add-photo, .btn-sig-clear, .btn-crew-lock, .btn-unlock) { min-height: 44px; }
.responsive-form-page :is(.combo-clear, .step-remove, .photo-remove) { min-width: 32px; min-height: 32px; }
.responsive-form-page .rating-btn { min-height: 44px; }
.responsive-form-page .form-section { gap: 12px; }
.forms-page .forms-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.forms-page .forms-content { min-width: 0; }
.forms-page .form-navigation { display: grid; gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); align-self: start; }
.forms-page .form-navigation label { color: var(--blue); }
.forms-page #form-switcher { min-height: 44px; font-size: 16px; }
.forms-page #form-switcher:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.forms-page .header-sub { text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.35; }
.forms-page .btn-secondary { padding: 10px 14px; font-size: 14px; }
.forms-page .toggle-btn { max-width: 100%; overflow-wrap: break-word; }
.forms-page #form-fields { display: grid; gap: 12px; }
.forms-page :is(#view-hub, #view-form) > :is(header, .banner, .draft-banner) { margin-bottom: 12px; }
.forms-page .checklist-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 0; }
.responsive-form-page .repeat-grid-scroll { max-width: 100%; }

@media (min-width: 900px) {
  .responsive-form-page .container { padding-top: 20px; }
  .responsive-form-page #add-to-home { display: none; }
  .responsive-form-page .form-section { padding: 18px; }
  .responsive-form-page :is(input[type="text"], input[type="date"], input[type="time"], input[type="number"], select, textarea) { padding: 10px 12px; font-size: 16px; min-height: 44px; }
  .responsive-form-page select { padding-right: 36px; }
  .responsive-form-page .combo-input { padding-right: 44px; }
  .responsive-form-page .btn-send { padding: 14px 20px; min-height: 52px; }
  .forms-page .forms-workspace:has(> .form-navigation:not([hidden])) { grid-template-columns: 224px minmax(0, 1fr); gap: 16px; }
  .forms-page .form-navigation { position: sticky; top: 20px; }
  .forms-page .form-actions .btn-secondary { padding: 12px 20px; }
  .forms-page .form-header > div { order: 1; flex: 1 1 0; }
  .forms-page .form-header .btn-back { order: 2; }

  /* Metadata fields share rows. Complex controls keep the whole row.
     No dense packing or CSS reordering: keyboard and reading order stay intact. */
  .forms-page #form-fields,
  .forms-page #form-fields .form-section,
  .jha-page #project-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px 18px;
  }
  .forms-page #form-fields > *,
  .forms-page #form-fields .form-section > *,
  .jha-page #project-section > * { grid-column: 1 / -1; min-width: 0; }
  .forms-page #form-fields > .field,
  .forms-page #form-fields .form-section > .field,
  .forms-page #form-fields > .client-field-gate:has(> .field),
  .forms-page #form-fields .form-section > .client-field-gate:has(> .field),
  .jha-page #project-section > :is(.field, .field-row) { grid-column: auto; }
  .forms-page #form-fields > :is(.field, .client-field-gate):has(textarea, .rating-section, .repeat-grid-scroll, .count-group, .utility-table, .sig-pad, .photo-thumbs, .crew-list, .cc-chips, .toggle-group input[type="checkbox"]),
  .forms-page #form-fields .form-section > :is(.field, .client-field-gate):has(textarea, .rating-section, .repeat-grid-scroll, .count-group, .utility-table, .sig-pad, .photo-thumbs, .crew-list, .cc-chips, .toggle-group input[type="checkbox"]),
  .jha-page #project-section > .field:has(textarea) { grid-column: 1 / -1; }

  /* Sections holding only simple controls pair side by side; a section with a
     wide control (grids, tables, photos, signatures, crews, ratings, counts)
     keeps the whole row. DOM and keyboard order stay intact. */
  .forms-page #form-fields > .form-section { grid-column: auto; }
  .forms-page #form-fields > .form-section:has(textarea, .repeat-grid-scroll, .utility-table, .photo-thumbs, .sig-pad, .crew-list, .cc-chips, .rating-section, .count-group) { grid-column: 1 / -1; }
  .forms-page #form-fields .crew-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  /* The three hazard-analysis text fields read across like a work-plan table. */
  .jha-page .step-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
  .jha-page .step-header { grid-column: 1 / -1; }
  .jha-page .step-card > .field:has(input[data-field="responsible"]) { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(200px, 340px); align-items: center; justify-content: start; gap: 12px; }
  .jha-page :is(.ppe-grid, .crew-list) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .jha-page .crew-list { max-height: 360px; }
}

@media (min-width: 1100px) {
  .jha-page #project-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .responsive-form-page .container { padding: 12px 10px 24px; gap: 10px; }
  .responsive-form-page header { padding: 12px; gap: 10px; }
  .responsive-form-page .logo-img { height: 38px; }
  .responsive-form-page h1 { font-size: 18px; }
  .responsive-form-page .form-section { padding: 12px; gap: 10px; }
  .responsive-form-page .field { gap: 4px; }
  .responsive-form-page .field-row { gap: 10px; }
  .responsive-form-page .section-title { padding-bottom: 8px; }
  .responsive-form-page .banner { padding: 10px 12px; font-size: 13px; }
  .responsive-form-page :is(input[type="text"], input[type="date"], input[type="time"], input[type="number"], select, textarea) { padding: 10px; font-size: 16px; min-height: 44px; }
  .responsive-form-page select { padding-right: 32px; }
  .responsive-form-page .combo-input { padding-right: 42px; }
  .responsive-form-page :is(.crew-item, .ppe-item) { padding: 8px; min-height: 44px; }
  .responsive-form-page .btn-send { padding: 14px; font-size: 17px; min-height: 52px; }
  .forms-page .form-navigation { grid-template-columns: 76px minmax(0, 1fr); align-items: center; padding: 10px; gap: 8px; }
  .forms-page .form-actions { flex-wrap: wrap; }
  .forms-page .form-actions .btn-secondary { padding: 12px 14px; }
  .forms-page :is(.rating-item, .rating-item-row) { flex-wrap: wrap; }
  .forms-page .rating-btns { max-width: 100%; flex-wrap: wrap; }
  .forms-page .rating-item-text { flex-basis: 100%; }
  .forms-page .utility-table { max-width: 100%; overflow-x: auto; }
  .forms-page :is(.utility-header, .utility-row) { min-width: 620px; }
  .jha-page .crew-header { flex-wrap: wrap; gap: 8px; }
  .jha-page .crew-lock-banner { flex-wrap: wrap; gap: 8px; }
  .jha-page .step-card { padding: 12px; }
}

@media (max-width: 360px) {
  .responsive-form-page .field-row { grid-template-columns: minmax(0, 1fr); }
  .jha-page :is(.ppe-grid, .crew-list) { grid-template-columns: minmax(0, 1fr); }
}