/* form_grid.css — snap-to-grid block arranger (launch-feedback rows 103/104).
   Tap-first, >=44px targets, no hover-only affordances (see mobile-touch-ui-pitfalls). */

.fl-bar { margin: 14px 0 10px; }

.fl-trigger {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 12px 14px; box-sizing: border-box;
  background: #002868; color: #fff; border-radius: 10px;
  font-weight: 700; font-size: 14.5px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fl-trigger:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.fl-trigger .fl-ico { font-size: 17px; }
.fl-trigger .fl-tlabel { flex: 1 1 auto; min-width: 0; }
.fl-trigger .fl-chev { transition: transform .15s ease; }
.fl-bar.open .fl-trigger .fl-chev { transform: rotate(180deg); }

.fl-panel {
  border: 1px solid #cfe0f7; border-top: 0; border-radius: 0 0 10px 10px;
  background: #f6faff; padding: 12px 14px;
}
.fl-tools { display: block; }
.fl-status { display: block; font-size: 13px; color: #23406b; line-height: 1.5; margin-bottom: 10px; }
.fl-hint { font-size: 12px; color: #5a6b85; margin-top: 8px; line-height: 1.5; }
.fl-tools-row { display: flex; flex-wrap: wrap; gap: 8px; }

.fl-btn {
  flex: 1 1 auto; min-height: 44px; padding: 12px 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #fff; border: 1.5px solid #002868; color: #002868; border-radius: 9px;
  font-weight: 700; font-size: 14px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fl-btn.fl-save { background: #0a7d3c; border-color: #0a7d3c; color: #fff; }
.fl-btn.fl-done { background: #002868; color: #fff; }
.fl-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.fl-btn[aria-disabled="true"] { opacity: .55; }

/* --- the form while it is on the grid --- */
form.fl-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
form.fl-grid > * { grid-column: 1 / -1; }            /* hidden inputs, tax notices: full width */
form.fl-grid > .fb { min-width: 0; }

form.fl-grid.fl-editing {
  background-image: repeating-linear-gradient(90deg,
      rgba(29,91,168,.10) 0, rgba(29,91,168,.10) 1px, transparent 1px, transparent calc(100% / 12));
  background-size: 100% 100%;
  padding: 10px; border: 1px dashed #9fc0e8; border-radius: 10px;
}

form.fl-grid.fl-editing > .fb {
  position: relative;
  outline: 2px solid #1d5ba8; outline-offset: 2px;
  border-radius: 8px; background: rgba(255,255,255,.92);
  padding: 8px; min-height: 52px; touch-action: none;
}
form.fl-grid.fl-editing > .fb.fl-dragging { outline: 3px solid #0a7d3c; background: #eafff2; }

.fl-handle {
  display: flex; align-items: center; gap: 6px;
  min-height: 40px; margin: -4px -4px 6px; padding: 8px 10px; box-sizing: border-box;
  background: #002868; color: #fff; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; cursor: grab; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.fl-handle .fl-grip { font-size: 15px; letter-spacing: 1px; }
.fl-handle .fl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-handle .fl-pos { font-weight: 600; opacity: .85; white-space: nowrap; }

.fl-nudge { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.fl-nudge .fl-nb {
  min-width: 44px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid #1d5ba8; color: #002868; border-radius: 8px;
  font-size: 15px; font-weight: 700; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fl-nudge .fl-nb.fl-wide { flex: 1 1 44%; font-size: 13px; }
.fl-nudge .fl-nb:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

.fl-badge {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: #0a7d3c; color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle;
}

@media (max-width: 520px) {
  .fl-trigger { font-size: 13.5px; }
  form.fl-grid { gap: 8px; }
  form.fl-grid.fl-editing > .fb { padding: 6px; }
}