/* ==================================================================
   Hot Boards — Spotter Sheet styles
   Letter-portrait page (.sp-page), team-colored via inline vars set in
   spotter.js: --sp-p (primary) · --sp-banner · --sp-tm (team name) ·
   --sp-num (jersey number). Self-contained so the print window can reuse
   this same stylesheet.
   ================================================================== */

/* On-screen view host */
#spotterView .spotter-pad { padding: 18px 16px 40px; }
.sp-toolbar {
  display:flex; align-items:center; gap:12px; max-width:1180px; margin:0 auto 16px;
  background:var(--surface-card,#181B21); border:1px solid var(--border-strong,rgba(255,255,255,.12));
  border-radius:10px; padding:10px 14px;
}
.sp-toolbar-l { display:flex; align-items:center; gap:9px; min-width:0; }
.sp-toolbar-ttl { font-family:var(--font-display,"Saira Condensed",sans-serif); font-size:15px; font-weight:700;
  letter-spacing:.02em; color:var(--text-strong,#FBFAF6); white-space:nowrap; }
.sp-toolbar-sub { font-size:12px; color:var(--text-muted,#9A958A); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-toolbar-r { margin-left:auto; display:flex; align-items:center; gap:10px; }
/* Print button now reuses print-offense.css's .pb-ctrl-btn/.pb-print-btn classes */

/* Text-size stepper */
.sp-fontctl { display:inline-flex; align-items:center; gap:2px; background:var(--surface-raised,#15181D);
  border:1px solid var(--border-strong,rgba(255,255,255,.14)); border-radius:8px; padding:2px; }
.sp-fbtn { font-family:var(--font-display,"Saira Condensed",sans-serif); font-size:14px; font-weight:700; color:var(--text-secondary,#BDB7AB);
  background:none; border:none; border-radius:6px; width:30px; height:28px; cursor:pointer; transition:background .15s,color .15s; }
.sp-fbtn:hover { background:var(--surface-hover,rgba(255,255,255,.06)); color:var(--heat-300,#E6C892); }
.sp-fval { font-family:var(--font-mono,"JetBrains Mono",monospace); font-size:11.5px; font-weight:600; color:var(--text-body,#F2EFE8);
  min-width:38px; text-align:center; }

/* Add-player toggle */
.sp-add-btn { font-family:var(--font-display,"Saira Condensed",sans-serif); font-size:12.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--heat-400,#D8AE6E); background:none; border:1px solid rgba(182,138,78,.45);
  border-radius:8px; padding:9px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .15s,border-color .15s; }
.sp-add-btn:hover, .sp-add-btn.on { background:var(--heat-wash,rgba(182,138,78,.14)); border-color:var(--heat-500,#B68A4E); }

/* Add-player inline form */
.sp-addbar { display:flex; align-items:center; gap:8px; max-width:1180px; margin:-8px auto 16px; flex-wrap:wrap;
  background:var(--surface-card,#181B21); border:1px solid var(--border-strong,rgba(255,255,255,.12)); border-radius:10px; padding:10px 14px; }
.sp-add-in { font-family:var(--font-sans,"Inter",sans-serif); font-size:13px; color:var(--text-body,#F2EFE8);
  background:var(--surface-raised,#15181D); border:1px solid var(--border-strong,rgba(255,255,255,.16)); border-radius:7px; padding:8px 10px; outline:none; }
.sp-add-in:focus { border-color:var(--heat-500,#B68A4E); }
.sp-add-team { min-width:160px; }
.sp-add-num { width:56px; text-align:center; }
.sp-add-name { flex:1; min-width:140px; }
.sp-add-side { display:flex; gap:12px; font-size:12.5px; color:var(--text-secondary,#BDB7AB); }
.sp-add-side label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.sp-add-go { font-family:var(--font-display,"Saira Condensed",sans-serif); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-on-heat,#15110A); background:var(--accent-grad,linear-gradient(180deg,#C79A56,#A87C3E)); border:none; border-radius:7px; padding:8px 16px; cursor:pointer; }
.sp-add-go:hover { filter:brightness(1.06); }
.sp-add-err { font-size:12px; color:#e8a06a; }
.sp-blank, .sp-print-empty { max-width:1180px; margin:40px auto; text-align:center; color:var(--text-muted,#9A958A); font-size:14px; }

.sp-pages { display:flex; flex-direction:column; align-items:center; gap:26px; }

/* The printed 11x17 portrait page (@ ~96dpi: 11in=1056px, 17in=1632px) */
.sp-page {
  width:1056px; max-width:100%; min-height:1632px; background:#fff; color:#15171b;
  padding:38px 42px 28px; box-shadow:0 8px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column; box-sizing:border-box;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
.sp-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 14px; padding-bottom:10px; border-bottom:2px solid var(--sp-p,#241773); }
.sp-head-team { font-size:15px; font-weight:800; letter-spacing:.04em; color:var(--sp-p,#241773); text-transform:uppercase; }
.sp-head-meta { font-size:11px; font-weight:700; letter-spacing:.10em; color:#8a8f98; text-transform:uppercase; white-space:nowrap; }

/* DEGRADED-BOARD MARKING. Same amber language as the print board's .pb-sb-prov
   (print-offense.css) and the same words, sized for 11x17 instead of a sidebar.
   Amber, not red, so it reads as "check this" rather than as an injury
   designation. It must survive the print stylesheet -- the original defect was
   that its on-screen predecessor did not. Total height incl. margin is kept in
   step with PROV_H in spotter.js, which reserves the space out of the row
   budget so this can never push the sheet onto a second page. */
.sp-prov {
  margin:0 0 12px; padding:4px 9px;
  border:1px solid #b8860b; border-left:4px solid #b8860b; border-radius:3px;
  background:#fff8e1; color:#6b4a00;
  font:800 10px/1.3 "Archivo","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
}
@media print { .sp-prov { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

.sp-cols { display:flex; gap:26px; flex:1; align-items:flex-start; }
.sp-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.sp-side-cols { display:flex; gap:8px; align-items:flex-start; }
.sp-side-cols > .sp-rows { flex:1; min-width:0; }

.sp-banner { background:var(--sp-banner,#241773); border-radius:5px 5px 0 0; padding:9px 12px 7px; text-align:center; }
.sp-tm { font-size:25px; font-weight:800; letter-spacing:.01em; color:var(--sp-tm,#9E7C0C); text-transform:uppercase; line-height:1.02; }
.sp-side { font-size:11px; font-weight:700; letter-spacing:.24em; color:rgba(255,255,255,.82); text-transform:uppercase; margin-top:3px; }

.sp-rows { border:1.5px solid var(--sp-p,#241773); border-top:0; border-radius:0 0 5px 5px; overflow:hidden; }
.sp-side-cols > .sp-rows:not(:first-child) { border-radius:0 0 5px 5px; }
.sp-row { display:flex; align-items:center; gap:6px; min-height:var(--sp-rowh,32px); padding:0 10px 0 4px; border-bottom:1px solid #e7e5dd; }
.sp-row:last-child { border-bottom:0; }
.sp-row:nth-child(even) { background:#faf9f6; }
.sp-num { width:64px; flex:0 0 64px; text-align:center; font-size:var(--sp-numf,22px); font-weight:800;
  color:var(--sp-num,#241773); font-variant-numeric:tabular-nums; line-height:1; }
.sp-nm { font-size:var(--sp-namef,15.5px); color:#15171b; letter-spacing:.005em; min-width:0; flex:1; white-space:nowrap; will-change:transform; }
.sp-nm .sp-first { font-weight:500; }
.sp-nm .sp-last { font-weight:800; text-transform:uppercase; }
.sp-nm .sp-last.sp-phon { text-transform:none; }   /* phonetic: keep its stress-casing */
.sp-row.sp-empty .sp-nm { color:#b9b7af; font-style:italic; font-size:13px; }
/* manually-added players: subtle gold tick + screen-only remove control */
.sp-row.sp-manual { background:rgba(182,138,78,.10); }
.sp-row.sp-manual .sp-num::after { content:"+"; font-size:.5em; vertical-align:super; color:#b68a4e; margin-left:1px; }
.sp-rm { flex:0 0 auto; width:22px; height:22px; border:none; background:none; color:#bd5a45; font-size:17px; line-height:1;
  cursor:pointer; border-radius:5px; opacity:.55; transition:opacity .15s,background .15s; }
.sp-rm:hover { opacity:1; background:rgba(189,90,69,.12); }
@media print { .sp-rm { display:none !important; } }

.sp-foot { margin-top:12px; text-align:center; font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#a8acb3; }
.sp-foot b { color:var(--sp-p,#241773); }

@media (max-width:880px){ .sp-page{ padding:20px 18px; } .sp-cols{ gap:14px; } }