/* The field, controls and coaching cue form one functional surface. */
.pb-stage { background:var(--ink); color:var(--card); border-radius:4px; overflow:hidden; scroll-margin-top:18px; }
.pb-stage-head { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid #466058; gap:20px; }
.pb-stage-head .pb-eyebrow { color:#b0c6b9; font-size:.56rem; margin-bottom:6px; }
.pb-stage-head h2 { font:800 2.5rem/.95 var(--display); letter-spacing:-.01em; margin:0; }
.pb-stage-head > div:first-child { min-width:0; overflow-wrap:anywhere; }
.pb-stage-nav { display:flex; gap:6px; flex:none; }
.pb-stage-nav button { min-height:38px; width:38px; border:1px solid #62736b; border-radius:2px; background:transparent; color:var(--card); font-size:1.1rem; cursor:pointer; }
.pb-stage-nav button:hover { background:var(--orange); color:var(--ink); }
.pb-stage-body { display:grid; grid-template-columns:minmax(0,1fr) 220px; }
.pb-stage-pitch { min-width:0; padding:8px 18px 14px; background:#153d36; }
.pb-stage-field { display:flex; justify-content:center; align-items:center; min-height:260px; }
.pb-stage-field svg { width:100%; max-height:270px; border-radius:0; }
.pb-stage-field svg > rect { fill:#153d36; }
.pb-stage-field svg > line { stroke:#c1ddc9; }
.pb-stage-field svg [data-route],.pb-stage-field svg [data-player] { transition:opacity 180ms; }
.pb-stage-positions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding-top:6px; }
.pb-stage-positions > span { font:700 .48rem var(--mono); color:#b1c5b6; letter-spacing:.05em; }
#pb-stage-players { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:100%; }
#pb-stage-players button { width:34px; min-height:34px; border:1px solid #799486; background:transparent; color:var(--player-color,var(--card)); border-radius:50%; font:900 .7rem var(--body); cursor:pointer; }
#pb-stage-players button[aria-pressed=true] { background:var(--player-color,var(--card)); color:#153d36; border-color:transparent; }
.pb-stage-brief { display:flex; flex-direction:column; padding:20px 18px 16px; border-left:1px solid #466058; }
.pb-stage-brief .pb-eyebrow { color:var(--lab-lime); font-size:.5rem; }
#pb-stage-summary { font:700 .78rem/1.5 var(--body); margin:0 0 14px; }
#pb-stage-read p:last-child { font:.76rem/1.5 var(--body); margin:0; color:#cbd8cf; }
.pb-stage-guide { margin:10px 0 18px; padding:0; min-height:32px; align-self:start; border:0; background:transparent; color:var(--card); text-decoration:underline; text-underline-offset:4px; font:700 .7rem var(--body); cursor:pointer; }
.pb-stage-brief .pb-button { margin-top:auto; font-size:.77rem; width:100%; }
.pb-stage-brief > a { margin-top:10px; color:#cbd8cf; font-size:.65rem; text-align:center; }
.pb-stage-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 22px 8px; border-top:1px solid #466058; }
.pb-stage-controls .pb-primary { min-height:42px; }
.pb-stage-tool { min-height:42px; padding:0 3px; border:0; background:transparent; color:#d8e3da; font:800 .73rem var(--body); cursor:pointer; }
.pb-stage-tool:hover { color:var(--orange); }
.pb-stage-timeline { flex:1; min-width:80px; margin-left:10px; }
.pb-stage-timeline span { display:block; font:700 .44rem var(--mono); letter-spacing:.05em; color:#b1c5b6; }
.pb-stage-timeline input { display:block; width:100%; height:24px; margin:0; accent-color:var(--orange); cursor:ew-resize; }
.pb-stage-footnote { margin:0; padding:0 22px 12px; color:#a2b8a9; font-size:.56rem; }
@media (min-width:1440px) { .pb-stage-field svg { max-height:350px; } .pb-stage-body { grid-template-columns:minmax(0,1fr) 250px; } }
@media (min-width:960px) and (max-width:1199px) { .pb-stage-body { grid-template-columns:minmax(0,1fr) 195px; } .pb-stage-field { min-height:260px; } .pb-stage-pitch { padding-inline:8px; } .pb-stage-brief { padding:16px 14px; } .pb-stage-controls { gap:8px; } }
@media (max-width:639px) { .pb-stage-head { padding:16px; gap:8px; } .pb-stage-head h2 { font-size:2rem; } .pb-stage-head .pb-eyebrow { font-size:.46rem; } .pb-stage-nav button { width:32px; min-height:36px; } .pb-stage-body { grid-template-columns:1fr; } .pb-stage-pitch { padding:4px 10px 14px; } .pb-stage-field { min-height:0; } .pb-stage-field svg { max-height:330px; } .pb-stage-positions { gap:7px; padding-top:0; } #pb-stage-players { gap:4px; } #pb-stage-players button { width:32px; min-height:34px; } .pb-stage-brief { border-left:0; border-top:1px solid #466058; padding:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:start; } #pb-stage-call,#pb-stage-summary { grid-column:1/-1; } #pb-stage-summary { font-size:.77rem; margin:0 0 4px; } #pb-stage-read { display:none; } .pb-stage-guide { margin:0; font-size:.67rem; grid-column:1; } .pb-stage-brief .pb-button { grid-column:2; grid-row:3/5; width:auto; min-height:42px; padding:8px 10px; font-size:.67rem; margin:0; } .pb-stage-brief > a { font-size:.61rem; margin:0; text-align:left; } .pb-stage-controls { padding:12px 16px 6px; gap:14px; } .pb-stage-timeline { margin-left:0; flex-basis:100%; } .pb-stage-timeline input { min-height:32px; } .pb-stage-footnote { padding:0 16px 12px; font-size:.51rem; } }
@media (prefers-reduced-motion:reduce) { .pb-stage-field svg [data-route],.pb-stage-field svg [data-player] { transition:none; } }
@media (max-width:639px) {
  #pb-stage-players button { width:40px; min-height:44px; }
  #pb-stage-players:has(button:nth-child(8)) { display:grid; grid-template-columns:repeat(4,40px); }
  .pb-stage-nav button { width:40px; min-height:44px; }
  .pb-stage { display:flex; flex-direction:column; }
  .pb-stage-body { display:contents; }
  .pb-stage-pitch { order:1; }
  .pb-stage-controls { order:2; }
  .pb-stage-footnote { order:3; }
  .pb-stage-brief { order:4; }
}