/* The field maps — see field-maps.js for the decisions.

   The heading is the card's own (.pc-h / .pc-sd, player-card.css). Under it a
   pill switch of three views, the view's title in Didot italic, the picture on
   a fixed dark slab (the same plate in both themes, so the map and its key are
   the same colors everywhere), the key numbers in one sentence, and the sample
   line closing it over a hairline. The app's ui/fieldMaps.tsx, in CSS.

   The map is drawn for a phone's column: on a wide column it keeps to a phone's
   width rather than growing a strike zone a foot tall. */

.fm-body { max-width: 460px; }

/* the switch: a pill of three, the view on show in ink (Billy 2026-10-30: every
   button is a pill). Controls take the body face, never a typewriter face. */
.fm-switch {
  display: flex; gap: 3px; margin-top: 18px; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px;
}
.fm-switch button {
  appearance: none; border: 0; border-radius: 999px; background: transparent;
  min-width: 0; min-height: 44px; padding: 9px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-family: var(--font-button, var(--font-sans));
  -webkit-tap-highlight-color: transparent;
}
.fm-switch button:hover { background: var(--bg-inset); }
.fm-switch button[aria-selected="true"] { background: var(--text-primary); color: var(--bg-page); }
.fm-switch button:focus { outline: none; }
.fm-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* a name or role that doesn't fit takes a second line, never cut short or set smaller (the review of
   2026-10-31, as the app's) */
.fm-nm {
  display: flex; align-items: center; max-width: 100%;
  font-size: 13px; line-height: 16px; font-weight: 600; text-align: center;
}
.fm-nm > span { min-width: 0; overflow-wrap: break-word; }
.fm-dot { flex: 0 0 auto; margin-right: 5px; }
.fm-role { font-size: 11px; line-height: 13px; margin-top: 3px; max-width: 100%; text-align: center; }

.fm-vt {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 16px; line-height: 21px; color: var(--text-secondary); margin: 14px 0 0;
}

/* the slab: a dark plate with a fine lip of light along its top and a soft
   shadow under it (a border, not a shadow, would read as a box on the page) */
.fm-slab {
  position: relative; margin-top: 10px; padding-bottom: 14px;
  background: #211B26; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
html[data-theme="light"] .fm-slab { box-shadow: 0 1px 2px rgba(40, 20, 50, .28); }
.fm-slab::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: rgba(255, 255, 255, .07); pointer-events: none;
}
.fm-draw { width: 100%; }
.fm-svg { display: block; max-width: 100%; }

/* the key under the map: the steps the view uses, then what its ends mean */
.fm-key { margin: 2px 16px 0; }
.fm-steps { display: flex; gap: 3px; height: 14px; }
.fm-step { flex: 1 1 0; min-width: 0; border-radius: 3px; display: block; }
.fm-step.fm-none { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); border-radius: 2.5px; }
.fm-step.fm-none.fm-bar { box-shadow: inset 0 0 0 1.2px rgba(244, 239, 230, .42); border-radius: 2.4px; }
.fm-ends {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
  font-family: var(--font-sans); font-size: 11.5px; line-height: 14.5px; font-weight: 600;
  color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums;
}
.fm-ends span { white-space: nowrap; }
.fm-ends .fm-mid { font-weight: 400; color: rgba(255, 255, 255, .62); }
.fm-tick {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-family: var(--font-sans); font-size: 12px; line-height: 15px; color: rgba(255, 255, 255, .78);
}
.fm-tick svg { flex: 0 0 auto; }

/* the key numbers, in one sentence; its lead in the semibold */
.fm-say {
  font-family: var(--font-sans); font-size: 14px; line-height: 20px;
  color: var(--text-primary); margin: 12px 0 0; text-wrap: pretty;
}
.fm-say b { font-weight: 600; }
.fm-sure {
  font-family: var(--font-sans); font-size: 12.5px; line-height: 18px; color: var(--text-tertiary);
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--border);
}

/* a new view fades in; none under reduced motion */
.fm-fade { animation: fm-fade 160ms ease-out; }
@keyframes fm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fm-fade { animation: none; } }

/* On a computer the map uses the column's width (2026-10-31, the card-order board: the maps sat in
   the left half of the column with nothing on the right): its switch, title, sentence and sample
   line on the left, the picture and its key on the right, as the game pages' matchup maps. A
   phone, and a pop-up, keep the one column above. */
@media (min-width: 1100px) {
  .pc-col:not(.pc-side2) .fm:not(.mm-card) .fm-body {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-rows: auto auto auto auto auto 1fr; column-gap: 44px; align-items: start;
  }
  .pc-col:not(.pc-side2) .fm:not(.mm-card) .fm-view { display: contents; }
  .pc-col:not(.pc-side2) .fm:not(.mm-card) .fm-body > *, .pc-col:not(.pc-side2) .fm:not(.mm-card) .fm-view > * { grid-column: 1; }
  .pc-col:not(.pc-side2) .fm:not(.mm-card) .fm-view > .fm-slab { grid-column: 2; grid-row: 1 / 7; margin-top: 18px; }
}

/* ── the original graphics (Billy 2026-10-31, round three) ────────────────────
   The key is a smooth bar, amber to green through the league (or one side fading in), as the boards'. */
.fm-steps .fm-grad { flex: 1 1 auto; display: block; height: 8px; border-radius: 4px; align-self: center; }
/* a field or a court tipped back in perspective, as if seen from behind the play; it sits on the page
   with its own ground (turf, wood) rather than on the slab, its key in the page's ink. field-maps.js (TIP)
   stands its words up by these same numbers, and gives back the room the tipped top edge leaves. */
.fm-tilt { perspective: 900px; }
/* its own layer, drawn once: Safari otherwise repaints the tilted, blurred drawing every frame */
.fm-tilt svg { transform: rotateX(26deg); transform-origin: 50% 100%; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fm-slab.fm-open { background: none; box-shadow: none; padding-bottom: 0; }
html[data-theme="light"] .fm-slab.fm-open { box-shadow: none; }
.fm-slab.fm-open::before { display: none; }
.fm-slab.fm-open .fm-key { margin: 6px 0 0; }
.fm-slab.fm-open .fm-ends { color: var(--text-secondary); }
.fm-slab.fm-open .fm-ends .fm-mid { color: var(--text-tertiary); }