/* Pulso · lineup composition. Responsive to its container, including accordions. */
.p-lineups { container:lineups / inline-size; color:var(--p-text); margin-block:var(--p-space-16); }
.p-lineup-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:var(--p-space-16); }
.p-lineup-tactics,.p-lineup-roster,.p-lineup-changes { margin:0; border:0; border-radius:18px; background:var(--p-surface); box-shadow:var(--p-elevation-card); min-width:0; }
.p-lineup-tactics { padding:20px; }
.p-lineup-tactics h3 { margin:0 0 16px; font:700 15px/22px var(--p-font-body); }
.p-lineup-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.p-lineup-team-label { display:flex; gap:8px; align-items:center; min-width:0; }
.p-lineup-team-label>div { min-width:0; }
.p-lineup-team-label strong { display:block; font:700 13px/20px var(--p-font-body); overflow-wrap:anywhere; color:var(--p-text); }
.p-lineup-team-label small { display:block; margin-top:3px; font:400 11px/16px var(--p-font-body); color:var(--p-text-muted); }
.p-lineup-key { flex:none; width:12px; height:12px; border-radius:50%; background:var(--p-emphasis); border:2px solid var(--p-emphasis); }
.p-lineup-team-label.away .p-lineup-key { background:var(--p-surface); border-color:var(--p-text-muted); }
.p-pitch { isolation:isolate; position:relative; display:flex; height:400px; max-width:760px; margin-inline:auto; border:1px solid var(--p-border); border-radius:14px; padding:16px 8px; overflow:hidden; background:repeating-linear-gradient(90deg,transparent 0 10%,color-mix(in srgb,var(--p-text) 3%,transparent) 10% 20%),var(--p-surface-raised); }
.p-pitch-markings { position:absolute; inset:12px; border:1px solid var(--p-border-control); border-radius:3px; opacity:.45; z-index:-1; pointer-events:none; }
.p-pitch-markings::before { content:""; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid var(--p-border-control); }
.p-pitch-circle { position:absolute; width:60px; height:60px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid var(--p-border-control); border-radius:50%; }
.p-pitch-area { position:absolute; top:25%; bottom:25%; width:14%; border:1px solid var(--p-border-control); }
.p-pitch-area.home { left:0; border-left:0; }.p-pitch-area.away { right:0; border-right:0; }
.p-pitch-half { display:flex; flex:1; min-width:0; }
.p-pitch-line { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:space-around; min-width:0; }
.p-pitch-player { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; min-width:0; padding:2px 0; border:0; border-radius:8px; background:transparent; cursor:pointer; font:inherit; }
.p-pitch-player:hover,.p-pitch-player[aria-expanded="true"] { background:var(--p-surface-hover); }
.p-pitch-player:focus-visible,.p-pitch-close:focus-visible { outline:2px solid var(--p-focus); outline-offset:2px; }
.p-pitch-avatar { position:relative; display:grid; place-items:center; width:34px; height:34px; flex:none; border:1px solid var(--p-border-control); border-radius:50%; background:var(--p-surface); color:var(--p-text-muted); }
.p-pitch-avatar img { position:absolute; inset:0; display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--p-surface); }
.p-pitch-initials { font:700 10px/1 var(--p-font-body); }
.p-pitch-number { position:absolute; right:-6px; bottom:-4px; z-index:1; display:grid; place-items:center; min-width:17px; height:17px; padding:0 2px; background:var(--p-emphasis); color:var(--p-emphasis-ink); border:1px solid var(--p-surface); border-radius:50%; font:750 9px/1 var(--p-font-body); box-shadow:0 0 0 1px var(--p-emphasis); }
.away .p-pitch-number { background:var(--p-surface); border-color:var(--p-surface); color:var(--p-text); box-shadow:0 0 0 1px var(--p-text-muted); }
.p-pitch-name { max-width:100%; padding:1px 3px; border-radius:4px; background:var(--p-surface-raised); color:var(--p-text); font:600 10px/14px var(--p-font-body); text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.p-lineup-note { margin:12px 0 0; color:var(--p-text-muted); font:400 11px/17px var(--p-font-body); }
.p-pitch-detail { position:fixed; inset:auto; margin:0; box-sizing:border-box; width:320px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--p-border); border-radius:14px; background:var(--p-surface); color:var(--p-text); box-shadow:0 4px 20px color-mix(in srgb,var(--p-overlay) 25%,transparent),0 1px 4px color-mix(in srgb,var(--p-overlay) 20%,transparent); z-index:var(--p-layer-dropdown); font:400 12px/1.5 var(--p-font-body); }
.p-pitch-detail[hidden] { display:none; }
.p-pitch-detail-head { display:flex; align-items:center; gap:14px; padding:4px 0 14px; }
.p-pitch-detail-head .p-pitch-avatar { width:42px; height:42px; }
.p-pitch-detail[data-side="visitante"] .p-pitch-number { background:var(--p-surface); color:var(--p-text); box-shadow:0 0 0 1px var(--p-text-muted); }
.p-pitch-identity { flex:1; min-width:0; overflow-wrap:anywhere; }
.p-pitch-detail-head strong,.p-pitch-detail-head small { display:block; }
.p-pitch-detail-head strong { font-size:14px; }.p-pitch-detail-head small,.p-pitch-facts>small { color:var(--p-text-muted); }
.p-pitch-close { align-self:start; flex:none; width:28px; height:28px; margin:-8px -8px 0 0; border:0; border-radius:6px; background:transparent; color:var(--p-text-muted); cursor:pointer; font:22px/1 var(--p-font-body); }
.p-pitch-close:hover { background:var(--p-surface-hover); color:var(--p-text); }
.p-pitch-facts { padding-top:12px; border-top:1px solid var(--p-border); }
.p-pitch-facts + .p-pitch-facts { margin-top:12px; }
.p-pitch-facts>strong,.p-pitch-facts>small { display:block; font-size:11px; }
.p-pitch-facts dl { margin:6px 0; }
.p-pitch-facts dl>div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:8px 0; border-bottom:1px solid var(--p-border); }
.p-pitch-facts dl>div:last-child { border-bottom:0; }
.p-pitch-facts dt { color:var(--p-text-muted); text-transform:capitalize; }
.p-pitch-facts dd { margin:0; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.p-pitch-facts>small { margin-top:10px; }
.p-pitch-detail p { margin:0; border-top:1px solid var(--p-border); padding-top:12px; color:var(--p-text-muted); font-size:12px; }
.p-lineup-rosters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; min-width:0; }
.p-lineup-roster { padding:16px; }
.p-lineup-roster>.p-lineup-team-label { min-height:46px; margin-bottom:16px; }
.p-lineup-roster-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; font:650 11px/18px var(--p-font-body); color:var(--p-text-muted); border-bottom:1px solid var(--p-border); }
.p-lineup-list { list-style:none; padding:0; margin:0; }
.p-lineup-player { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:34px; padding-block:6px; border-bottom:1px solid var(--p-border); font:500 12px/18px var(--p-font-body); }
.p-lineup-player:last-child { border-bottom:0; }
.p-lineup-number { color:var(--p-emphasis); font-variant-numeric:tabular-nums; text-align:center; font-weight:750; }
.away .p-lineup-number { color:var(--p-text-muted); }
.p-lineup-name { overflow-wrap:anywhere; }
.p-lineup-position { color:var(--p-text-muted); font:500 9px/16px var(--p-font-body); }
.p-lineup-coach { margin:10px 0 0; padding-block:10px 0; border-top:1px solid var(--p-border); color:var(--p-text); font:500 11px/18px var(--p-font-body); }
.p-lineup-coach span { color:var(--p-text-muted); margin-right:4px; }
.p-lineup-bench { border-top:1px solid var(--p-border); margin-top:12px; }
.p-lineup-bench summary,.p-lineup-changes summary { cursor:pointer; padding:12px 0; font:650 12px/20px var(--p-font-body); color:var(--p-text); border-radius:6px; }
.p-lineup-bench summary::marker,.p-lineup-changes summary::marker { color:var(--p-icon-accent); }
.p-lineup-bench summary>span,.p-lineup-changes summary>span { float:right; color:var(--p-text-muted); font-variant-numeric:tabular-nums; }
.p-lineup-bench summary:hover,.p-lineup-changes summary:hover { color:var(--p-emphasis); background:var(--p-surface-hover); }
.p-lineup-bench summary:focus-visible,.p-lineup-changes summary:focus-visible { outline:2px solid var(--p-emphasis); outline-offset:3px; }
.p-lineup-empty { margin:16px 0; font:400 12px/20px var(--p-font-body); color:var(--p-text-muted); }
.p-lineup-changes { margin-top:16px; padding:4px 16px; }
.p-lineup-changes ol { margin:0; padding:0; list-style:none; }
.p-lineup-changes li { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--p-border); }
.p-lineup-minute { align-self:start; color:var(--p-emphasis); font:750 12px/20px var(--p-font-body); }
.p-lineup-in,.p-lineup-out { display:block; font:500 12px/20px var(--p-font-body); }
.p-lineup-in { color:var(--p-emphasis); }.p-lineup-out,.p-lineup-changes small { color:var(--p-text-muted); }
.p-lineup-changes small { max-width:140px; font:400 11px/18px var(--p-font-body); text-align:right; }
@container lineups (min-width:1100px) {
  .p-lineup-layout { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
  .p-lineup-layout.no-pitch { grid-template-columns:minmax(0,1fr); }
}
@container lineups (max-width:599px) {
  .p-lineup-tactics { padding:16px; }
  .p-pitch { flex-direction:column; height:460px; max-width:400px; padding:8px 12px; background:repeating-linear-gradient(0deg,transparent 0 10%,color-mix(in srgb,var(--p-text) 3%,transparent) 10% 20%),var(--p-surface-raised); }
  .p-pitch-half { flex-direction:column; min-height:0; }.p-pitch-line { flex-direction:row; min-height:0; }
  .p-pitch-player { flex:1; }.p-pitch-name { font-size:9px; }
  .p-pitch-avatar { width:30px; height:30px; }
  .p-pitch-markings::before { left:0; right:0; top:50%; bottom:auto; border-left:0; border-top:1px solid var(--p-border-control); }
  .p-pitch-area { width:52%; height:14%; left:24%; right:auto; top:auto; bottom:auto; }
  .p-pitch-area.home { top:0; left:24%; border-left:1px solid var(--p-border-control); border-top:0; }
  .p-pitch-area.away { bottom:0; right:auto; border-right:1px solid var(--p-border-control); border-bottom:0; }
}
@container lineups (max-width:439px) {
  .p-lineup-rosters { grid-template-columns:minmax(0,1fr); }
  .p-lineup-changes li { grid-template-columns:32px minmax(0,1fr); gap:8px; }
  .p-lineup-changes small { grid-column:2; max-width:none; text-align:left; }
}