/* ============================================================
   Diamondbacks — the club's own colours.

   Sedona Red and Sonoran Sand on black, which is the current uniform
   set. Red carries structure and marks the one thing to work on; sand
   is the warm neutral and fills the primary buttons, so red never has
   to mean two things at once.

   Teal is the 1998 throwback colour, used here for "good" — it is the
   only heritage hue that reads clearly on black without competing with
   the red.
   ============================================================ */

:root{
  --ground:  #0c0c0e;   /* black */
  --ground2: #060607;
  --panel:   #17181b;
  --panel-2: #202226;
  --line:    #32343a;

  --chalk:   #f7f5f1;   /* white */
  --chalk-2: #cfcbc2;
  --muted:   #8b8e96;

  --sand:    #e3d4ad;   /* Sonoran Sand */
  --clay:    #a71930;   /* Sedona Red */
  --clay-lit:#d8213e;   /* Sedona Red, lifted for text on black */
  --grass:   #30ced8;   /* 1998 teal */
  --amber:   #e8a33d;
  --flag:    #d8213e;

  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --data:    "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r: 3px;
  --gut: clamp(16px, 4vw, 34px);
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  border-top:3px solid var(--clay);
  background:
    radial-gradient(130% 85% at 50% -15%, #1a1c20 0%, transparent 62%),
    var(--ground);
  color:var(--chalk);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,canvas{ max-width:100%; display:block }
button{ font:inherit; color:inherit }

.wrap{
  width:min(1180px, 100% - var(--gut)*2);
  margin-inline:auto;
}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px dashed var(--line);
  padding:18px 0 16px;
  margin-bottom:clamp(28px,5vw,52px);
}
.masthead-in{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--chalk) }
.brand-lines{ display:grid; gap:1px }
.brand-eyebrow{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; font-size:11px; color:var(--sand); line-height:1;
}
.brand-plate{ width:23px; height:23px; fill:none; stroke:var(--clay); stroke-width:2; stroke-linejoin:round }
.brand-name{
  font-family:var(--display); font-weight:900;
  font-size:27px; letter-spacing:.045em; text-transform:uppercase; line-height:1;
}

/* ---------- stages ---------- */
.stage{ padding-bottom:clamp(40px,7vw,80px) }
.stage[hidden]{ display:none }

.stage-h{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(40px, 8.5vw, 78px);
  line-height:.93;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.stage-sub{
  margin:0 0 30px; max-width:56ch; color:var(--chalk-2); font-size:16.5px;
}

/* ---------- home plate dropzone (signature) ---------- */
.plate{
  --plate-b:var(--line);
  position:relative;
  width:min(520px,100%);
  aspect-ratio: 1 / .84;
  margin:0 0 20px;
  cursor:pointer;
  display:grid; place-items:center;
  background:var(--panel);
  clip-path: polygon(0% 0%, 100% 0%, 100% 57%, 50% 100%, 0% 57%);
  transition:background .18s ease;
}
/* the chalk outline, drawn just inside the plate */
.plate::before{
  content:""; position:absolute; inset:7px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 57%, 50% 100%, 0% 57%);
  background:
    repeating-linear-gradient(90deg, var(--plate-b) 0 9px, transparent 9px 17px) top/100% 2px no-repeat,
    repeating-linear-gradient(0deg,  var(--plate-b) 0 9px, transparent 9px 17px) left/2px 57% no-repeat,
    repeating-linear-gradient(0deg,  var(--plate-b) 0 9px, transparent 9px 17px) right/2px 57% no-repeat;
  pointer-events:none;
  transition:--plate-b .2s ease;
}
.plate:hover, .plate:focus-visible, .plate.is-over{ background:var(--panel-2); --plate-b:var(--clay); outline:none }
.plate-in{ display:grid; justify-items:center; gap:7px; text-align:center; padding:0 24px; margin-bottom:14%; }
.plate-icon{ width:38px; height:38px; fill:none; stroke:var(--clay); stroke-width:1.7; stroke-linejoin:round; margin-bottom:2px }
.plate-title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:25px; letter-spacing:.04em; line-height:1;
}
.plate-sub{ color:var(--muted); font-size:13.5px }

.plate-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px }

/* ---------- buttons ---------- */
.btn{
  border:1px solid transparent; border-radius:var(--r);
  padding:11px 20px; cursor:pointer;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:17px; line-height:1;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--clay); outline-offset:3px }
.btn-chalk{ background:var(--sand); color:#14100a }
.btn-chalk:hover{ background:#efe2c2 }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--chalk-2) }
.btn-ghost:hover{ border-color:var(--chalk-2); color:var(--chalk) }
.btn-block{ width:100%; margin-top:4px }
.btn-mini{
  background:transparent; border-color:var(--line); color:var(--chalk-2);
  padding:7px 12px; font-size:14px; letter-spacing:.05em;
}
.btn-mini:hover{ border-color:var(--chalk-2); color:var(--chalk) }
.btn-quiet{ border-color:transparent; color:var(--muted); padding-inline:0 }
.btn-quiet:hover{ color:var(--chalk-2); border-color:transparent; text-decoration:underline }
.btn[disabled]{ opacity:.45; pointer-events:none }

/* ---------- how-to + honesty ---------- */
.howto{
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  padding:14px 0; margin-bottom:26px; max-width:70ch;
}
.howto summary{ cursor:pointer; list-style:none; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap }
.howto summary::-webkit-details-marker{ display:none }
.howto-k{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:19px;
}
.howto-k::before{ content:"+ "; color:var(--clay-lit) }
.howto[open] .howto-k::before{ content:"– " }
.howto-hint{ color:var(--muted); font-size:13.5px }
.howto-list{ margin:14px 0 4px; padding-left:1.15em; color:var(--chalk-2); font-size:15px }
.howto-list li{ margin-bottom:7px }
.howto-list b{ color:var(--chalk); font-weight:600 }

/* ---------- review layout ---------- */
.review{
  display:grid; gap:clamp(18px,2.6vw,30px);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:880px){ .review{ grid-template-columns:1fr } }

/* Grid children default to min-width:auto, which lets wide content
   (the measurements table) push the whole column past the viewport.
   These two lines are what keep the phone layout from scrolling sideways. */
.review-video, .review-side{ min-width:0 }

.review-video video{
  width:100%; background:#000; border:1px solid var(--line); border-radius:var(--r);
}

/* Anything that genuinely can't get narrower scrolls inside itself
   rather than dragging the page with it. */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
.stagecanvas{
  position:relative; background:#000;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.stagecanvas canvas{ width:100%; height:auto; display:block }

.review-side{ display:grid; gap:14px; align-content:start }

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px 17px;
}
.card-k{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:15px; color:var(--muted); margin-bottom:9px;
}
.card-note{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.5 }
.card-good{ border-left:2px solid var(--grass) }

/* ---------- trim ---------- */
.trim{ display:grid; gap:8px; margin-top:12px }
.trim-row{ display:flex; align-items:center; gap:11px }
.trim-val{ font-family:var(--data); font-size:14px; color:var(--chalk-2) }

/* ---------- segmented controls (lineup-card feel) ---------- */
.seg{ border:0; padding:0; margin:0; display:flex; gap:7px; flex-wrap:wrap }
.seg-col{ flex-direction:column; gap:5px }
.seg-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.seg label{
  display:flex; align-items:baseline; gap:7px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r);
  padding:8px 12px; font-size:14.5px; color:var(--chalk-2);
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.seg-col label{ width:100% }
.seg input{ position:absolute; opacity:0; pointer-events:none }
.seg label:hover{ border-color:var(--chalk-2) }
.seg label em{ color:var(--muted); font-style:normal; font-size:13px }
.seg label:has(input:checked){
  border-color:var(--clay); background:rgba(167,25,48,.22); color:var(--chalk);
}
.seg label:has(input:focus-visible){ outline:2px solid var(--clay); outline-offset:2px }

/* ---------- working ---------- */
.chalkbar{
  height:2px; background:var(--line); margin:8px 0 14px; max-width:640px; overflow:hidden;
}
.chalkbar-fill{
  height:100%; width:0%; background:var(--chalk);
  transition:width .2s linear;
}
.work-note{ color:var(--muted); font-size:13.5px; margin:0 0 22px; max-width:50ch }

/* ---------- verdict ---------- */
.verdict{
  border-top:2px solid var(--clay);
  padding:20px 0 26px; margin-bottom:26px;
}
.verdict-k{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:15px; color:var(--clay-lit); margin-bottom:8px;
}
.verdict-h{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(32px,6.2vw,60px); line-height:.95; margin:0 0 12px; max-width:20ch;
}
.verdict-why{ margin:0; max-width:62ch; color:var(--chalk-2); font-size:16px }

/* ---------- baseline scrubber (signature) ---------- */
.baseline{ position:relative; height:44px; margin-top:10px }
.baseline-svg{ position:absolute; inset:0; width:100%; height:44px; overflow:visible }
.bl-chalk{
  stroke:var(--line); stroke-width:2; stroke-dasharray:7 7; stroke-linecap:round;
}
.bl-tick{ stroke:var(--chalk-2); stroke-width:2 }
.bl-tick-on{ stroke:var(--clay-lit); stroke-width:3 }
.baseline input[type=range]{
  position:absolute; inset:0; width:100%; height:44px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.baseline input[type=range]:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.baseline input[type=range]::-webkit-slider-runnable-track{ height:44px; background:transparent }
.baseline input[type=range]::-moz-range-track{ height:44px; background:transparent }
.baseline input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%;
  background:var(--chalk); border:2px solid var(--clay); margin-top:15px;
  box-shadow:0 0 0 4px rgba(12,12,14,.9);
}
.baseline input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%;
  background:var(--chalk); border:2px solid var(--clay);
  box-shadow:0 0 0 4px rgba(12,12,14,.9);
}
.phaselabels{
  position:relative; height:30px; margin-bottom:14px;
}
.phaselabels span{
  position:absolute; top:0; transform:translateX(-50%);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.phaselabels span.on{ color:var(--clay-lit) }

/* ---------- filmstrip ---------- */
.filmstrip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:7px;
}
.filmstrip figure{ margin:0; cursor:pointer }
/* These jump the video, and are reachable from a keyboard now, so
   they have to show where the focus is. */
.filmstrip figure:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:2px }
.filmstrip canvas{
  width:100%; border:1px solid var(--line); border-radius:2px; background:#000;
  transition:border-color .14s ease;
}
.filmstrip figure:hover canvas, .filmstrip figure.on canvas{ border-color:var(--clay) }
.filmstrip figcaption{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:11.5px; color:var(--muted); margin-top:5px; text-align:center;
}
.filmstrip figure.on figcaption{ color:var(--clay-lit) }

/* ---------- lists ---------- */
.goodlist{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
.goodlist li{ font-size:14.5px; color:var(--chalk-2); padding-left:19px; position:relative }
.goodlist li::before{
  content:""; position:absolute; left:0; top:.52em; width:9px; height:9px;
  border-left:2px solid var(--grass); border-bottom:2px solid var(--grass);
  transform:rotate(-45deg) translateY(-1px);
}
.goodlist li b{ color:var(--chalk); font-weight:600 }
.nextlist{ margin:0; padding-left:1.2em; display:grid; gap:8px; font-size:14.5px; color:var(--chalk-2) }
.nextlist li::marker{ color:var(--clay-lit); font-family:var(--data) }
.nextlist b{ color:var(--chalk); font-weight:600 }

.drill-name{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:20px; margin:0 0 7px; line-height:1.05;
}
.drill-how{ margin:0 0 10px; font-size:14.5px; color:var(--chalk-2) }
.drill-say{
  margin:0; font-size:14.5px; color:var(--chalk);
  border-left:2px solid var(--clay); padding-left:12px;
}
.drill-say em{ color:var(--sand); font-style:normal; display:block; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.08em; font-family:var(--display); font-weight:700 }
/* the "parked for now" explainer, when a fault has been carried too long */
#drillBox .card-note{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line) }

/* ---------- scorebook ---------- */
.scorebook{ margin-top:clamp(34px,5vw,58px); border-top:1px dashed var(--line); padding-top:24px }
.scorebook-head h3{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(24px,3.6vw,34px); letter-spacing:.02em; margin:0 0 6px; line-height:1;
}
.scorebook-head p{ margin:0 0 18px; color:var(--muted); font-size:14.5px; max-width:64ch }

.sb-table{
  width:100%; border-collapse:collapse; font-size:14.5px;
}
.sb-table th{
  text-align:left; font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:13px; color:var(--muted);
  border-bottom:1px solid var(--line); padding:0 12px 8px 0;
}
.sb-table td{
  border-bottom:1px dashed var(--line); padding:11px 12px 11px 0; vertical-align:top;
  color:var(--chalk-2);
}
.sb-table td:first-child{ color:var(--chalk); font-weight:600; width:26% }
.sb-table th:nth-child(2), .sb-table td:nth-child(2){ width:26% }
.sb-table th:nth-child(3), .sb-table td:nth-child(3){ width:30% }
.sb-read{ font-family:var(--data); font-size:14px; color:var(--chalk); white-space:nowrap }
.sb-want{ font-family:var(--data); font-size:13px; color:var(--muted); white-space:nowrap }
.sb-status{ text-align:right; width:1%; }
.sb-table td.sb-status{ text-align:right; padding-right:0 }
.pill{
  display:inline-block; font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:12.5px;
  padding:3px 9px; border-radius:2px; border:1px solid currentColor; white-space:nowrap;
}
.pill.good{ color:var(--grass) }
.pill.watch{ color:var(--amber) }
.pill.work{ color:var(--flag); background:rgba(216,33,62,.14) }
.sb-note{ display:block; color:var(--muted); font-size:12.5px; margin-top:3px }

.sb-blind{ margin-top:20px; color:var(--muted); font-size:13.5px; max-width:70ch }
.sb-blind b{ color:var(--chalk-2); font-weight:600 }
.sb-blind ul{ margin:8px 0 0; padding-left:1.15em }
.sb-blind li{ margin-bottom:5px }

/* ---------- coach note + actions ---------- */
.coachnote{
  margin-top:clamp(30px,4vw,48px); background:var(--panel);
  border:1px solid var(--line); border-left:2px solid var(--clay);
  border-radius:var(--r); padding:16px 18px; max-width:76ch;
}
.coachnote p{ margin:0; color:var(--chalk-2); font-size:14.5px }
.coachnote b{ color:var(--chalk) }
.results-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px }

/* ---------- foot ---------- */
.foot{
  border-top:1px dashed var(--line); padding:18px 0 34px; margin-top:20px;
}
.foot p{ margin:0; color:var(--muted); font-size:13px }
.foot b{ color:var(--chalk-2) }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

@media (max-width:560px){
  .filmstrip{ grid-template-columns:repeat(5,1fr); gap:4px }
  .filmstrip figcaption{ font-size:9.5px; letter-spacing:.02em }
  .sb-table td:first-child{ width:34% }
  /* On a phone the table has to wrap rather than scroll — a coach
     shouldn't have to swipe a table sideways at a ballfield. */
  .sb-read, .sb-want, .prog-vals{ white-space:normal }
  .sb-table{ font-size:13.5px }
  .sb-table th{ font-size:11.5px; letter-spacing:.05em }
  .sb-table td{ padding-right:8px }
  .pill{ font-size:11px; padding:2px 6px }
}

/* ============================================================
   Roster, history, sessions
   ============================================================ */

/* ---------- breadcrumbs ---------- */
.crumbs{ margin-left:auto; display:flex; align-items:baseline; gap:8px; font-size:13.5px }
.crumb{ color:var(--muted); text-decoration:none }
a.crumb:hover{ color:var(--chalk); text-decoration:underline }
.crumb-sep{ color:var(--line) }
.crumb-now{ color:var(--chalk-2) }
@media (max-width:620px){ .crumbs{ margin-left:0; width:100%; margin-top:4px } }

/* ---------- account chip ---------- */
.account{ display:flex; align-items:center; gap:9px; margin-left:12px }
.acct-chip{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; font-size:12.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:2px; padding:4px 9px;
  text-decoration:none; white-space:nowrap;
}
a.acct-chip:hover{ border-color:var(--clay); color:var(--clay) }
.acct-live{ color:var(--grass); border-color:rgba(48,206,216,.45) }
.acct-who{ font-size:13px; color:var(--muted) }
@media (max-width:620px){ .account{ margin-left:0; width:100%; margin-top:6px } }

/* ---------- roster ---------- */
.roster-list{
  display:grid; gap:10px; margin-bottom:30px;
  grid-template-columns:repeat(auto-fill, minmax(238px,1fr));
}
.playercard{
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px 15px;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
.playercard:hover{ border-color:var(--clay); background:var(--panel-2) }
.playercard:active{ transform:translateY(1px) }
.playercard:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.playercard-top{ display:flex; align-items:baseline; gap:9px; justify-content:space-between; margin-bottom:7px }
.playercard-name{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:26px; letter-spacing:.02em; line-height:1;
}
.playercard-bats{ font-family:var(--data); font-size:12px; color:var(--muted); white-space:nowrap }
.playercard-focus{
  font-size:14.5px; color:var(--clay-lit); font-weight:600; margin-bottom:4px; line-height:1.3;
}
.playercard-none{ color:var(--muted); font-weight:400 }
.playercard-meta{ font-size:12.5px; color:var(--muted); font-family:var(--data) }

.empty{ color:var(--muted); font-size:15px; margin:0 0 4px }

/* ---------- add player ---------- */
.addplayer{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  border-top:1px dashed var(--line); padding-top:20px; margin-bottom:30px;
}
.field{ display:grid; gap:6px }
.field label{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:14px; color:var(--muted);
}
.field input{
  background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  color:var(--chalk); padding:10px 12px; font:inherit; font-size:15.5px; min-width:220px;
}
.field input:focus{ outline:none; border-color:var(--clay) }
.field input::placeholder{ color:#5f7268 }

/* ---------- player page ---------- */
.playerhead{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap; margin-bottom:8px;
}
.playerhead .stage-h{ margin-bottom:6px }
.playerhead .stage-sub{ margin-bottom:0 }

.sec-h{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(21px,3vw,28px); letter-spacing:.02em; margin:28px 0 4px; line-height:1;
}
.sec-note{ margin:0 0 14px; color:var(--muted); font-size:13.5px }

.card-focus{ border-left:2px solid var(--clay) }
.focus-cue{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(26px,4.4vw,40px); line-height:.98; margin:0 0 8px;
}
.focus-why{ margin:0 0 6px; font-size:14.5px; color:var(--chalk-2) }
.focus-streak{ margin:0; font-size:13px; color:var(--muted); font-family:var(--data) }

/* ---------- session history rows ---------- */
.sessionlist{ display:grid; gap:10px }
.sessionrow{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px 14px; position:relative;
}
.sessionrow-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px }
.sessionrow-date{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:19px;
}
.sessionrow-n{ font-family:var(--data); font-size:12.5px; color:var(--muted) }
.sessionrow-focus{ color:var(--clay-lit); font-weight:600; font-size:14.5px; margin-bottom:6px }
.sessionrow-notes{
  color:var(--chalk-2); font-size:14px; margin-bottom:8px;
  border-left:2px solid var(--line); padding-left:11px;
}
.sessionrow .btn-quiet{ position:absolute; top:10px; right:12px; font-size:12.5px }

.chiprow{ display:flex; flex-wrap:wrap; gap:5px }
.chip{
  font-family:var(--data); font-size:11.5px; padding:3px 7px; border-radius:2px;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.chip-good{ color:var(--grass); border-color:rgba(48,206,216,.4) }
.chip-watch{ color:var(--amber); border-color:rgba(232,163,61,.4) }
.chip-work{ color:var(--flag); border-color:rgba(216,33,62,.45) }

/* ---------- trends ---------- */
.trends{ display:grid; gap:9px; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)) }
.trend{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px 9px;
}
.trend-label{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:13.5px; color:var(--muted); margin-bottom:2px;
}
.trend-svg{ width:100%; height:40px; overflow:visible }
.trend-line{ fill:none; stroke:var(--chalk-2); stroke-width:1.6; stroke-linejoin:round }
.trend-dot{ fill:var(--chalk-2) }
.trend-good{ fill:var(--grass) }
.trend-watch{ fill:var(--amber) }
.trend-work{ fill:var(--flag) }
.trend-now{ font-family:var(--data); font-size:12.5px; color:var(--chalk); margin-top:2px }

/* ---------- guardian contact ---------- */
.contact{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.contact:empty{ display:none }
.contact-link{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:14px; color:var(--chalk);
  border:1px solid var(--line); border-radius:var(--r);
  padding:7px 13px; text-decoration:none;
}
.contact-link:hover{ border-color:var(--clay-lit); color:var(--clay-lit) }
.field-tight{ margin-bottom:8px }
.field-tight input{ min-width:0; width:100% }

/* ---------- notes ---------- */
.notes{
  width:100%; background:var(--ground2); border:1px solid var(--line);
  border-radius:var(--r); color:var(--chalk); font:inherit; font-size:14.5px;
  padding:10px 12px; resize:vertical; line-height:1.5;
}
.notes:focus{ outline:none; border-color:var(--clay) }
.notes::placeholder{ color:#5f7268 }

/* ---------- swings in progress ---------- */
.swingrow{
  display:grid; gap:9px; margin-bottom:22px;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
}
.swingcard{
  margin:0; position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.swingcard img{ width:100%; display:block; background:#000 }
.swingcard figcaption{ display:flex; justify-content:space-between; gap:8px; padding:7px 9px 8px; align-items:baseline }
.swingcard-n{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:14px;
}
.swingcard-flags{ font-family:var(--data); font-size:11.5px; color:var(--muted) }
.swingcard-x{
  position:absolute; top:5px; right:5px; width:24px; height:24px; line-height:1;
  border:0; border-radius:2px; background:rgba(6,6,7,.85); color:var(--chalk-2);
  cursor:pointer; font-size:17px;
}
.swingcard-x:hover{ background:var(--flag); color:#fff }

/* ---------- report extras ---------- */
.report-kicker{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:15px; color:var(--grass); margin:0 0 -6px;
}
.verdict-look{ margin:10px 0 0; max-width:62ch; color:var(--muted); font-size:14.5px }
.goodlist-fixed b{ color:var(--grass) }

.proglist{ display:grid; gap:7px; margin-bottom:6px }
.progrow{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:baseline;
  border-bottom:1px dashed var(--line); padding-bottom:7px; font-size:14.5px;
}
.prog-arrow{ font-size:11px }
.progrow.up .prog-arrow{ color:var(--grass) }
.progrow.down .prog-arrow{ color:var(--flag) }
.prog-label{ color:var(--chalk) }
.prog-vals{ font-family:var(--data); font-size:13px; color:var(--muted); white-space:nowrap }

.sb-compact td{ padding:8px 10px 8px 0; font-size:14px }
.sb-compact tr{ cursor:pointer }
.sb-compact tr:hover td{ color:var(--chalk) }
.sb-compact tr.on td{ color:var(--clay-lit) }
.sb-compact tr:focus-visible{ outline:2px solid var(--clay); outline-offset:-2px }

@media (max-width:560px){
  .playerhead .btn{ width:100% }
  .addplayer{ flex-direction:column; align-items:stretch }
  .addplayer .btn{ width:100% }
}

/* ============================================================
   Narrow screens — LAST in the file on purpose.
   Media queries add no specificity, so these have to come after
   the component rules they override or the component wins.
   ============================================================ */
@media (max-width:560px){
  /* nothing may force the page wider than the phone */
  .prog-vals, .sb-read, .sb-want{ white-space:normal; overflow-wrap:anywhere }
  .progrow{ grid-template-columns:auto 1fr minmax(0,auto) }
  .progrow > *{ min-width:0 }
  .prog-vals{ text-align:right; font-size:12px }
  .sessionrow-date{ font-size:17px }
  .sessionrow .btn-quiet{ position:static; display:block; margin-top:8px }
  .trends{ grid-template-columns:1fr }
  .chip{ font-size:11px }
}


/* ============================================================
   The sign-in gate. Nothing renders behind it.
   ============================================================ */
.gate{
  max-width:34rem; margin:clamp(30px,9vh,90px) auto 0; text-align:center;
}
.gate-eyebrow{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.26em; font-size:13px; color:var(--sand); margin:0 0 6px;
}
.gate-h{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(46px,11vw,92px); line-height:.9; letter-spacing:-.005em;
  margin:0 0 18px;
}
/* a chalked baseline under the wordmark, in Sedona Red */
.gate-h::after{
  content:""; display:block; width:74px; height:3px; margin:16px auto 0;
  background:var(--clay);
}
.gate-sub{ color:var(--chalk-2); font-size:16px; margin:0 auto 26px; max-width:34ch }
.gate-note{ color:var(--muted); font-size:13.5px; margin:16px auto 0; max-width:38ch }
.btn-lg{ font-size:20px; padding:14px 28px }


/* ---------- find a player ---------- */
.rostersearch{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:16px;
}
.rostersearch input[type=search]{
  flex:1 1 260px; min-width:0;
  background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  color:var(--chalk); font:inherit; font-size:16px; padding:11px 14px;
  -webkit-appearance:none; appearance:none;
}
.rostersearch input[type=search]:focus{ outline:none; border-color:var(--clay) }
.rostersearch input[type=search]::placeholder{ color:#5f6068 }
.rostersearch input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; cursor:pointer;
  background:var(--muted);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rostersearch-count{
  font-family:var(--data); font-size:12.5px; color:var(--muted); white-space:nowrap;
}

.swingcard-when{
  font-family:var(--data); font-size:11px; color:var(--muted);
  padding:0 9px 9px; margin-top:-4px;
}

/* ---------- who was that? ---------- */
.idlist{ display:grid; gap:6px }
.idrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px; color:var(--chalk-2);
  font-family:var(--body); font-size:15px; text-transform:none; letter-spacing:0;
  transition:border-color .14s ease, background .14s ease;
}
.idrow:hover{ border-color:var(--chalk-2); color:var(--chalk) }
.idrow:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.idrow-top{ border-color:var(--clay); background:rgba(167,25,48,.16) }
.idrow-main{ display:flex; align-items:baseline; gap:8px; min-width:0 }
.idrow-name{ font-weight:600; color:var(--chalk) }
.idrow-num{ font-family:var(--data); font-size:12.5px; color:var(--sand) }
.idrow-why{ font-family:var(--data); font-size:11.5px; color:var(--muted); white-space:nowrap }

/* ---------- the other two books ----------
   The roster is the front page, but pitch counts and the play chart
   are the things you open standing on a field, so they get their own
   way in rather than living behind a menu. */
.deskrow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px }
.desk{
  display:grid; gap:2px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; transition:border-color .14s ease;
}
.desk:hover{ border-color:var(--sand) }
.desk:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.desk-k{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:19px; line-height:1; color:var(--chalk);
}
.desk-v{ font-size:13.5px; color:var(--muted) }
@media (max-width:520px){ .deskrow{ grid-template-columns:1fr } }

.sub-h{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:21px; margin:26px 0 10px; color:var(--sand);
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px }
@media (max-width:420px){ .grid2{ grid-template-columns:1fr } }

/* ---------- the staff, today ---------- */
.mrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 13px; margin-bottom:6px;
}
.mrow-out{ border-left:3px solid var(--clay) }
.mrow-in{ border-left:3px solid var(--grass) }
.mrow-main{ display:flex; align-items:baseline; gap:9px; min-width:0; flex-wrap:wrap }
.mrow-name{ font-weight:600; color:var(--chalk) }
.mrow-max{ font-family:var(--data); font-size:12.5px; color:var(--sand); white-space:nowrap }
.mrow-why{ font-size:13px; color:var(--muted); flex-basis:100%; margin-top:3px }
.mrow-why em{ font-style:normal; color:var(--amber) }

/* ---------- four taps a ball ----------
   Targets are deliberately big: this gets used one-handed, standing
   up, between pitches, while watching something else. */
.tapstep{ margin:0 0 14px }
.tapstep-k{
  display:block; font-family:var(--data); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px;
}
.tapgrid{ display:flex; flex-wrap:wrap; gap:6px }
.tap{
  flex:0 0 auto; min-height:44px; cursor:pointer;
  background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 13px; color:var(--chalk-2);
  font-family:var(--body); font-size:15px; text-transform:none; letter-spacing:0;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.tap:hover{ border-color:var(--chalk-2); color:var(--chalk) }
.tap:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.tap-on{ border-color:var(--sand); background:rgba(227,212,173,.14); color:var(--chalk) }
.tap-bad.tap-on{ border-color:var(--clay-lit); background:rgba(216,33,62,.16) }
.tap-good.tap-on{ border-color:var(--grass); background:rgba(48,206,216,.14) }

.tally{ display:grid; gap:5px; font-size:14.5px; color:var(--chalk-2) }
.tally-row{ display:flex; justify-content:space-between; gap:12px }
.tally-row b{ color:var(--chalk); font-weight:600 }
.tally-n{ font-family:var(--data); color:var(--sand) }

/* ---------- what are we filming? ----------
   Three equal choices rather than one loud button and two quiet ones.
   The old layout used a bare .btn for pitching and fielding, which
   sets a transparent border and no background at all — on this ground
   they were very nearly invisible. Same tile on the roster and on a
   player's page, because it is the same decision in both places. */
.filmpick{ margin:0 0 18px }
.filmpick-k{
  display:block; font-family:var(--data); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 7px;
}
.filmpick-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px }
.filmtile{
  display:grid; gap:3px; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; min-height:64px;
  transition:border-color .14s ease, background .14s ease;
}
.filmtile:hover{ border-color:var(--sand); background:var(--panel-2) }
.filmtile:focus-visible{ outline:2px solid var(--clay); outline-offset:2px }
.filmtile-n{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:20px; line-height:1; color:var(--chalk);
}
.filmtile-v{ font-size:13px; color:var(--muted); line-height:1.35 }
@media (max-width:600px){
  .filmpick-row{ grid-template-columns:1fr }
  .filmtile{ min-height:0; padding:12px 14px }
}

/* ---------- clips still being read ----------
   The only thing telling a coach the phone has not simply eaten the
   swing he just filmed. */
.queuerail{ display:grid; gap:6px; margin:10px 0 4px }
.qrow{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  background:var(--ground2); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 12px; font-size:14.5px; color:var(--chalk-2);
}
.qrow-k{
  font-family:var(--data); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.qrow-reading{ border-left:3px solid var(--sand) }
.qrow-reading .qrow-k{ color:var(--sand) }
.qrow-failed{ border-left:3px solid var(--clay-lit) }
.qrow-failed .qrow-k{ color:var(--clay-lit) }
.qrow-v{ min-width:0; flex:1 }
/* The remove button sits at the far end of its row, so the rows read as
   a list of clips rather than a list of buttons. */
.qrow .btn-mini{ margin-left:auto; flex:none }
.qrow-clear{ justify-content:flex-end; background:none; border:none; padding:2px 0 }
.qrow-clear .btn-mini{ margin-left:0 }

/* The focus card's guidance: what to watch for, what to say, the drill.
   Laid out as a label/value list so a coach can find the one line he
   wants mid-practice instead of reading a paragraph. */
.focus-guide{ display:flex; flex-direction:column; gap:9px; margin:12px 0 4px }
.fg-row{ display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:baseline }
.fg-k{
  font-family:var(--data); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.fg-v{ font-size:14.5px; line-height:1.45; color:var(--chalk-2); min-width:0 }
.fg-say{ color:var(--sand); font-style:italic }
@media (max-width:420px){
  .fg-row{ grid-template-columns:1fr; gap:2px }
}
.chip-want{ opacity:.72; margin-left:7px; font-size:.88em; white-space:nowrap }