/* Roster page (design v3). Classes start with ro-. Tokens come from styles.css. */

#ro-app{min-height:70vh}
.ro-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:6px}
.ro-season select{min-height:48px;padding:0 14px;font:600 1.0625rem/1 var(--body)}
.ro-h2{margin-top:26px;font:700 1.6rem/1.15 var(--display)}
#ro-empty{margin-top:18px}

.ro-table{width:100%;margin-top:12px;border-collapse:collapse;font-size:1.125rem}
.ro-table th{padding:10px 12px;border-bottom:2px solid var(--edge);color:var(--muted);font:600 1rem/1.2 var(--body);text-align:left}
.ro-table td{padding:13px 12px;border-bottom:1px solid var(--line)}
.ro-table td:first-child{width:4.5rem;font:700 1.4rem/1 var(--display);color:var(--ink)}
.ro-table td:nth-child(2){font-weight:600}
.ro-table td:nth-child(3),.ro-table td:nth-child(4){color:var(--muted)}
/* a name that opens a player page: underlined, with an arrow */
.ro-link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ro-link::after{content:"\203A";margin-left:8px;color:var(--muted);text-decoration:none;display:inline-block}
@media (hover:hover){.ro-link:hover{text-decoration-thickness:2px}}
.ro-src{margin-top:14px;color:var(--muted);font-size:1rem}

/* phones: one clean two-line row per player (number, then name, then position and class) instead of four squeezed columns */
@media (max-width:560px){
  .ro-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ro-table,.ro-table tbody{display:block}
  .ro-table tr{display:grid;grid-template-columns:3.6rem 1fr auto;column-gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
  .ro-table td{padding:0;border:0}
  .ro-table td:first-child{grid-row:span 2;width:auto;align-self:center;font-size:1.7rem}
  .ro-table td:nth-child(2){grid-column:2/4}
  .ro-table td:nth-child(3){grid-column:2}
  .ro-table td:nth-child(4){grid-column:3;text-align:right}
}

@media print{
  .ro-ctl{display:none!important}
  .ro-h2{font-size:16pt;color:var(--ink)}
  .ro-table{font-size:11pt;color:var(--ink)}
  .ro-table th,.ro-table td{color:var(--ink)!important;border-color:var(--edge)}
}