/* Volleyball rotation maker (views/volleyball-rotation.cjs). Two panels: the form (system, team, six names, libero) and
 * the stage (six courts, service order, outputs). Desktop: form on the left, three courts per row on the right.
 * Phone: form, then one court per row so names stay readable. The SVG of a court comes from core/volleyball-rotation.mjs
 * (classes vr-*); its colours live here and are repeated for the PNG and the print sheet in the client. */
#visu-tools.vt-volleyball-rotation .vt-vr { grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); }
#visu-tools.vt-volleyball-rotation .vt-vr [hidden] { display: none !important; }
#visu-tools.vt-volleyball-rotation .vt-vr-form { display: grid; gap: 16px; align-content: start; }
#visu-tools.vt-volleyball-rotation .vt-vr-form .vt-fieldset { margin: 0 !important; }
#visu-tools.vt-volleyball-rotation .vt-vr-form .vt-fieldset > .vt-hint { margin: -4px 0 10px; }
/* Six short names: two per row at every width, so the form stays short on a phone. */
#visu-tools.vt-volleyball-rotation .vt-vr-names .vt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
#visu-tools.vt-volleyball-rotation .vt-vr-names .vt-label { font-size: 13.5px; line-height: 1.3; }
#visu-tools.vt-volleyball-rotation .vt-vr-form .vt-seg-item span { font-variant-numeric: tabular-nums; }
#visu-tools.vt-volleyball-rotation .vt-vr-stage { position: static; }
#visu-tools.vt-volleyball-rotation .vt-vr-head { display: grid; gap: 2px; }
#visu-tools.vt-volleyball-rotation .vt-vr-title { font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -0.02em; color: var(--vt-ink); overflow-wrap: anywhere; }
#visu-tools.vt-volleyball-rotation .vt-vr-sub { font-size: 14px; font-weight: 550; color: var(--vt-muted); }

#visu-tools.vt-volleyball-rotation .vt-vr-legend { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--vt-muted); }
#visu-tools.vt-volleyball-rotation .vt-vr-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
#visu-tools.vt-volleyball-rotation .vt-vr-key { width: 14px; height: 14px; border-radius: 50%; flex: none; }
#visu-tools.vt-volleyball-rotation .vt-vr-key.is-server { border: 1.5px dashed #0670a6; }
#visu-tools.vt-volleyball-rotation .vt-vr-key.is-setter { background: #19b4ef; }
#visu-tools.vt-volleyball-rotation .vt-vr-key.is-libero { background: #ffb020; }

#visu-tools.vt-volleyball-rotation .vt-vr-grid { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
#visu-tools.vt-volleyball-rotation .vt-vr-card { margin: 0; display: grid; gap: 4px; min-width: 0; }
#visu-tools.vt-volleyball-rotation .vt-vr-card-head { display: grid; gap: 0; }
#visu-tools.vt-volleyball-rotation .vt-vr-rot { font-size: 15px; font-weight: 720; color: var(--vt-ink); }
#visu-tools.vt-volleyball-rotation .vt-vr-serves { font-size: 13px; color: var(--vt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#visu-tools.vt-volleyball-rotation .vt-vr-svg { display: block; width: 100%; height: auto; }
#visu-tools.vt-volleyball-rotation .vt-vr-one { justify-self: start; font-size: 13px !important; padding: 2px 0 !important; }

/* Court drawing */
#visu-tools.vt-volleyball-rotation .vr-court { fill: #eaf5fb; }
#visu-tools.vt-volleyball-rotation .vr-front { fill: #d5ebf7; }
#visu-tools.vt-volleyball-rotation .vr-line, #visu-tools.vt-volleyball-rotation .vr-court-edge { fill: none; stroke: #8fc3e0; stroke-width: 1.6; }
#visu-tools.vt-volleyball-rotation .vr-net { fill: #0a1324; }
#visu-tools.vt-volleyball-rotation .vr-zone { font-size: 13px; font-weight: 700; fill: #8fc3e0; }
#visu-tools.vt-volleyball-rotation .vr-dot { fill: #0a1324; }
#visu-tools.vt-volleyball-rotation .vr-code { font-size: 17px; font-weight: 800; fill: #fff; letter-spacing: -0.02em; }
#visu-tools.vt-volleyball-rotation .vr-code[data-long] { font-size: 13px; }
#visu-tools.vt-volleyball-rotation .vr-name { font-size: 15px; font-weight: 700; fill: #0a1324; }
#visu-tools.vt-volleyball-rotation .vr-serve { fill: none; stroke: #0670a6; stroke-width: 1.8; stroke-dasharray: 7 5; }
#visu-tools.vt-volleyball-rotation .is-setter .vr-dot { fill: #19b4ef; }
#visu-tools.vt-volleyball-rotation .is-setter .vr-code { fill: #03121d; }
#visu-tools.vt-volleyball-rotation .is-libero .vr-dot { fill: #ffb020; }
#visu-tools.vt-volleyball-rotation .is-libero .vr-code { fill: #2b1a00; }

#visu-tools.vt-volleyball-rotation .vt-vr-order ol { margin: 6px 0 0 !important; padding: 0 !important; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: vr; }
#visu-tools.vt-volleyball-rotation .vt-vr-order li { counter-increment: vr; margin: 0; padding: 5px 10px; border: 1px solid var(--vt-line); border-radius: 999px; font-size: 13.5px; color: var(--vt-ink); background: var(--vt-bg); }
#visu-tools.vt-volleyball-rotation .vt-vr-order li::before { content: counter(vr) ". "; font-weight: 700; color: var(--vt-muted); }
#visu-tools.vt-volleyball-rotation #vt-vr-link { font-size: 14px; }

@media (max-width: 1100px) {
  #visu-tools.vt-volleyball-rotation .vt-vr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #visu-tools.vt-volleyball-rotation .vt-vr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  #visu-tools.vt-volleyball-rotation .vt-vr-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #visu-tools.vt-volleyball-rotation .vt-vr-svg { max-width: 340px; margin: 0 auto; }
}