/* =====================================================================
   referee.css — boxingunderdog.com/referee/ (js/referee.js): Become a Referee and the application (07.10.2026).
   Every width from 320 px to ultrawide: one column on phones, the outfits in a row that wraps, no sideways scroll.
   ===================================================================== */
.rf{padding:clamp(88px,10vw,120px) 0 clamp(48px,6vw,80px)}
.rf-page{width:min(1180px,100% - 32px);margin:0 auto}
.rf-page > .eyebrow{margin-bottom:8px}
.rf-page > .ph-title{margin:0 0 6px}
.rf-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,3vw,40px);align-items:center}
.rf-hero-copy p{color:var(--tx-mid);font-size:clamp(15px,1.4vw,17px);line-height:1.55;margin:0 0 18px;max-width:520px}
.rf-fits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1vw,12px)}
.rf-fits li{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.rf-fits img{width:100%;height:auto;aspect-ratio:520/693;object-fit:cover;border-radius:14px;border:2px solid var(--fit);background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rf-fits span{font:600 clamp(11px,1.1vw,13px)/1.2 var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--fit);text-align:center}
.rf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(24px,4vw,44px) 0}
.rf-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:18px 18px 16px;min-width:0}
.rf-card h3,.rf-apply h3{font:600 clamp(17px,1.6vw,20px)/1.2 var(--f-head);letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px;color:var(--tx-hi)}
.rf-list,.rf-levels,.rf-need{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px;line-height:1.45;color:var(--tx-mid)}
.rf-list b,.rf-need li{color:var(--tx-hi)}
.rf-levels li{display:flex;flex-direction:column;gap:2px}
.rf-star{font-weight:800;letter-spacing:.02em}
.rf-note{margin:12px 0 0;font-size:13px;color:var(--tx-low);line-height:1.45}
.rf-apply{background:linear-gradient(180deg,rgba(229,38,43,.07),rgba(229,38,43,0) 240px),var(--surface);border:1px solid var(--bd-2);border-radius:20px;padding:clamp(18px,3vw,32px);scroll-margin-top:90px}
/* the path above the form: Referee · Test Crew · Both (radio cards) and Test Crew's few words */
.rf-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px;max-width:860px}
.rf-path{display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 40px;position:relative;min-height:44px;box-sizing:border-box;border:1px solid var(--bd-2);border-radius:12px;cursor:pointer;min-width:0}
.rf-path input{position:absolute;left:14px;top:14px;margin:0;width:17px;height:17px;accent-color:var(--gold)}
.rf-path b{color:var(--tx-hi);font-size:15px}
.rf-path span{color:var(--tx-low);font-size:13px;line-height:1.4}
.rf-path:has(input:checked){border-color:var(--bd-gold);background:rgba(233,185,73,.08)}
.rf-path:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.rf-crew{margin:0 0 18px;max-width:860px;padding:12px 14px;border-radius:12px;background:rgba(38,198,166,.08);border:1px solid rgba(38,198,166,.3);color:var(--tx-mid);font-size:14px;line-height:1.5}
.rf-crew b{color:#26C6A6}
.rf-gate{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 0}
.rf-gate b{font-size:clamp(17px,1.6vw,20px);color:var(--tx-hi)}
.rf-gate span{color:var(--tx-mid);max-width:620px;line-height:1.5}
.rf-gate.is-loading span{color:var(--tx-low)}
.rf-form{display:grid;gap:18px;max-width:860px}
.rf-auto{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:13px;color:var(--tx-low)}
.rf-auto b{font-weight:600;color:var(--tx-mid);background:rgba(255,255,255,.05);border:1px solid var(--bd);border-radius:999px;padding:3px 10px}
.rf-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rf-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.rf-l{font-weight:700;color:var(--tx-hi);font-size:15px}
.rf-hint{font-size:12.5px;color:var(--tx-low)}
.rf-in{width:100%;box-sizing:border-box;background:var(--deep);border:1px solid var(--bd-2);border-radius:10px;color:var(--tx-hi);font:500 15px/1.4 var(--f-body);padding:10px 12px;min-height:44px}
.rf-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,185,73,.18)}
textarea.rf-in{resize:vertical;min-height:90px}
.rf-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rf-h .rf-in{width:96px;flex:0 0 auto}
.rf-h > span{color:var(--tx-low);font-size:14px}
.rf-seg{display:inline-flex;border:1px solid var(--bd-2);border-radius:10px;overflow:hidden;margin-left:auto}
.rf-seg button{background:none;border:0;color:var(--tx-mid);font:600 13px var(--f-body);padding:10px 14px;min-height:44px;cursor:pointer}
.rf-seg button[aria-pressed="true"]{background:rgba(233,185,73,.15);color:var(--gold-hi)}
.rf-opts{display:flex;flex-wrap:wrap;gap:8px}
.rf-opt{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;min-height:44px;box-sizing:border-box;border:1px solid var(--bd-2);border-radius:10px;cursor:pointer;color:var(--tx-mid);font-size:14px;max-width:100%}
.rf-opt input{accent-color:var(--gold);width:17px;height:17px;flex:0 0 auto;margin:0}
.rf-opt:has(input:checked){border-color:var(--bd-gold);background:rgba(233,185,73,.08);color:var(--tx-hi)}
.rf-rules{align-items:flex-start;line-height:1.45}
.rf-young{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:rgba(56,182,255,.08);border:1px solid rgba(56,182,255,.3)}
.rf-young b{color:var(--tx-hi)}.rf-young span{color:var(--tx-mid);line-height:1.5}
.rf-err{margin:0;color:#ff8a8a;font-weight:600}
.rf-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rf-done b{color:var(--gold-hi)}
@media (max-width:960px){
  .rf-hero{grid-template-columns:minmax(0,1fr)}
  .rf-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .rf-row2{grid-template-columns:minmax(0,1fr)}
  .rf-paths{grid-template-columns:minmax(0,1fr)}
  .rf-fits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-seg{margin-left:0}
  .rf-opt{width:100%}
}
@media (min-width:2200px){
  .rf-page{width:min(1500px,100% - 64px)}
}