/* The tennis serve map (serve-maps.js) in the card-ideas board's look (2026-10-30 board, idea 5; Billy
   2026-10-31: "go back to the old heat map for serving location"). The switch, the view's title,
   the sentence and the sample line are the field maps' (field-maps.css); the court is its own. */
.sm .fm-body { max-width: 520px; }
/* the far half of the court, tilted toward the reader */
.sm-court { perspective: 900px; margin: -4% -6px 0; }
.sm-court svg { display: block; width: 100%; height: auto; transform: rotateX(34deg); transform-origin: 50% 100%; }
.sm-zl { font-family: var(--font-sans); font-size: 12px; fill: rgba(255, 255, 255, .82); }
.sm-zl.sm-side { letter-spacing: .14em; font-weight: 600; }
.sm-zp { font-family: var(--font-display); font-size: 19px; fill: #FFFFFF; font-variant-numeric: tabular-nums lining-nums; }
/* the key: amber where the server wins fewer, green where more, their own average in the middle */
.sm-scale { margin-top: 8px; display: grid; gap: 4px; }
.sm-bar { height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(232, 170, 80, .85), rgba(232, 170, 80, .18) 45%, rgba(126, 206, 160, .18) 55%, rgba(126, 206, 160, .85)); }
.sm-ticks { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-sans); font-size: 11px; line-height: 1.2; color: var(--text-tertiary); }
/* On a computer the court takes the column's right half, its key under it, the switches and words on
   the left, as the other maps' (field-maps.css) (the review of 2026-10-31: the court sat in the left
   40% with the rest empty) */
@media (min-width: 1100px) {
  .pc-col:not(.pc-side2) .fm.sm .fm-view > .sm-court { grid-column: 2; grid-row: 1 / 6; margin-top: 4px; }
  .pc-col:not(.pc-side2) .fm.sm .fm-view > .sm-scale { grid-column: 2; grid-row: 6; }
}