/* Field view: show each fielder's NAME in full without the markers overlapping on the
 * diamond. A native <select> can only ever show ONE truncated line, so no width tuning
 * would keep "Catherine" or "Maeve How" from being clipped. Instead the visible name is
 * a normal element (.fname) that WRAPS to two lines, and the native <select> is laid
 * transparently on top (.fsel) so tapping the marker still opens the player dropdown.
 * On change the view re-renders, refreshing the visible name.
 *
 * Markers scale with the field (a % of its width) but are capped near the tightest
 * position spacing (SS-to-2B is ~22% of the field apart) so names get maximum room
 * without colliding. These selectors outrank the injected inline rules, so they win
 * without editing the view file.
 *
 * Verified headless (bounding-box collisions) across the 4-outfield (LCF/RCF) and rover
 * configs at 320-430px wide: 0 overlapping marker pairs, and full names render on up to
 * two lines instead of a single truncated letter. Desktop caps at 88px.
 */
.fieldwrap .fmarker { width: 18%; min-width: 50px; max-width: 92px; gap: 2px; }

/* Visible, wrapping name. overflow-wrap:anywhere lets even a single long word (a long
 * first name) break onto a second line rather than being clipped to one letter. */
.fieldwrap .fmarker .fnamebox { position: relative; width: 100%; }
.fieldwrap .fmarker .fname {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 24px; max-height: 34px; overflow: hidden; padding: 2px 3px;
  font-size: clamp(9px, 2.2vw, 11.5px); line-height: 1.04; font-weight: 600;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
  border: 1px solid var(--fielder-name-line); border-radius: var(--r-sm);
  background: var(--fielder-name-bg); color: var(--fielder-name-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
.fieldwrap .fmarker .fnamebox.open .fname { color: var(--ink-faint); font-style: italic; font-weight: 500; }

/* The real <select> covers the name box but is invisible; it still opens on tap/enter
 * and fires field:assign, which re-renders and refreshes the visible name above. */
.fieldwrap .fmarker .fsel {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; color-scheme: light;
}
.fieldwrap .fmarker .fnamebox:focus-within .fname { outline: 3px solid var(--fielder-name-focus); outline-offset: 1px; }

.fieldwrap .fmarker .fpos { height: 19px; min-width: 22px; font-size: clamp(9px, 2vw, 11px); }

/* Phones: the field is smallest here. The two-line name keeps width pressure low, so we
 * only tighten the gap and name padding to keep vertical pairs (CF-Rover, the pitcher
 * cluster) clear. */
@media (max-width: 560px) {
  .fieldwrap .fmarker { gap: 1px; }
  .fieldwrap .fmarker .fname { min-height: 22px; padding: 1px 2px; }
  .fieldwrap .fmarker .fpos { height: 17px; }
}

/* Very narrow phones (<=360px): the infield corners (1B-2B, 3B-SS) are the tightest
 * pairs, so shrink the marker a touch more here. Names still wrap in full. */
@media (max-width: 360px) {
  .fieldwrap .fmarker { width: 16%; min-width: 42px; }
  .fieldwrap .fmarker .fname { font-size: 9px; }
}