/* Soccer and volleyball rows. The board chrome is basketball's (board.css) and the bottom
   boxes and standings table are football's (football.css); only the player block is new,
   because only the player block had to change shape.

   A men's soccer roster is thirty names where basketball has fifteen, so the row has to
   live in about half the height. It does that by putting the name, the bio and the season
   on ONE line rather than three, and by letting the number column carry the eye down the
   page the way it does on the other two sheets. */

.fieldrows { flex: 0 0 auto; }
.frow {
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  height: var(--rowh, 28px); border-bottom: 1px solid #E4E9F1;
  position: relative; overflow: hidden;
}
.frow.alt { background: #F7F9FC; }

/* Same 38px column as the other two boards, so the jersey numbers form one unbroken line
   down the page whatever the sport. */
/* The team's colour behind the number, the same block the basketball and football sheets
   use — it is what carries the eye down the page, and these two were the odd ones out. */
.frow .fnum {
  width: 30px; flex-shrink: 0; align-self: stretch; max-height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight: 800; font-size: 17px; line-height: 1;
  color: var(--accent-ink); background: var(--accent); border-radius: 2px;
}
/* The name column is FIXED rather than stretchy. Left to grow it swallowed everything
   between the last letter of a short name and the first stat box — a band of white right
   down the middle of the sheet, widest exactly where the names were shortest. Pinning it
   hands that band to the notes instead. */
.frow .fwho { width: 252px; flex: 0 0 252px; min-width: 0; overflow: hidden; }
.frow .fname { font-size: var(--fname, 13px); font-weight: 700; color: #000; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .fbio, .frow .fwhere { font-size: var(--fbio, 9.5px); color: #000; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .fwhere { color: #3A4557; }

/* The season, in the same boxed cells basketball uses, so the two sheets read alike. */
.frow .fstats { display: flex; gap: 2px; flex-shrink: 0; }
.frow .fcell {
  width: 34px; text-align: center; background: #fff; border: 1px solid #E1E7F0;
  border-radius: 2px; padding: 1px 0 0;
}
.frow .flab { font-size: 8px; font-weight: 700; letter-spacing: .2px; color: #000;
  text-transform: uppercase; line-height: 1.1; }
.frow .fval { font-size: 11px; font-weight: 700; color: #000; font-variant-numeric: tabular-nums;
  line-height: 1.15; }
/* What used to be the gap. About 300px on a soccer sheet and 270 on volleyball — enough
   for the line you actually say about a player, beside his name rather than under it.
   Empty on screen it shows a faint rule to click; empty on paper it prints nothing. */
.frow .fnote { flex: 1; min-width: 0; font-size: var(--fbio, 9.5px); color: #000;
  line-height: 1.2; overflow: hidden; padding-right: 4px; }
.frow .fnote .ed { display: block; min-height: 9px; }
.frow .fnote .ed.ph { border-bottom: 1px dotted #C7D0DA; }
@media print { .frow .fnote .ed.ph { border-bottom: 0; } }

/* Three tiers by how much height a row ended up with — the same idea as the basketball
   board's, folding lines together rather than dropping anything. Tight is one line with
   the hometown tucked in after the bio; roomy earns a note column. */
/* The name and bio sizes are measured from the row height in fieldModel() and arrive as
   custom properties, so there is nothing to override here — a fixed size in a tier is
   exactly what clipped the names before. Only the number and the stat cells still step,
   and only when a row is genuinely short. */
.frow { --numsize: 17px; }
.tier-flat .frow .fnum { font-size: 15px; }
.tier-flat .frow .fcell { width: 32px; }
.tier-flat .frow .fval { font-size: 10.5px; }

/* The team's own season, across the bottom of the player block. Four numbers, large
   enough to be read at a glance, because these are the ones said out loud most. */
.teamstrip { display: flex; gap: 6px; margin-top: 6px; border: 1px solid #C9D2E0;
  border-radius: 2px; overflow: hidden; flex: 0 0 auto; }
.teamstrip .tcell { flex: 1; text-align: center; padding: 3px 0 2px; border-right: 1px solid #E4E9F1; }
.teamstrip .tcell:last-child { border-right: 0; }
.teamstrip .tlab { font-size: 8.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--accent2, #10233F); }
.teamstrip .tval { font-family: "Barlow Condensed","Arial Narrow",Arial,sans-serif; font-weight: 800;
  font-size: 20px; line-height: 1; color: #000; font-variant-numeric: tabular-nums; }

/* The bottom strip shares the page with the rows, so it takes what is left rather than
   pushing the page to a second sheet. */
.fieldboard .bbot { margin-top: 6px; }

/* The roster takes what is LEFT, rather than a number guessed in advance. Twice now that
   guess has been wrong and the difference has pooled at the bottom of the sheet as white
   space, because the bottom section was the flexible one and grew to swallow it. Turn that
   round: the bottom section is exactly as tall as the notes and trends inside it, and the
   rows have the rest. fieldFitRows() then divides it. */
.fieldboard .fieldrows { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.fieldboard .bbot { flex: 0 0 auto !important; }

/* The typed standings cells. They carry the same .sn/.sc/.so styling as every other
   standings table so the sheets match; the hover rule is the only hint that these ones
   are yours to fill in. */
.fstcell:empty::before { content: "—"; color: #C7D0DA; }
.fstcell:hover { background: #FFF8DC; border-radius: 2px; }
@media print { .fstcell:empty::before { content: ""; } .fstcell:hover { background: none; } }

/* A player marked "small row". One line, no stat boxes, no note — his height goes to the
   men who are actually going to play, which is the whole point of the control. */
.frow.small { height: var(--smallh, 17px); }
.frow.small .fwho.one { display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.frow.small .fname { font-size: 11px; font-weight: 700; flex-shrink: 0; }
.frow.small .fbio { font-size: 8.5px; color: #3A4557; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.frow.small .fnum { font-size: 12px; max-height: 15px; width: 30px; }
/* The number keeps its colour block so the column down the page stays unbroken. */

/* Hover controls, matching the basketball board's. */
.frow .rowtools { display: none; position: absolute; right: 4px; top: 1px; gap: 4px; }
.frow:hover .rowtools { display: flex; }
.frow .rowtools button { border: 1px solid #C7D0DA; background: #fff; border-radius: 4px;
  font-size: 9px; padding: 1px 6px; color: #38414D; cursor: pointer; }