/* Shot Charts — reusable renderer styles (scoped under .shot-charts) + standalone page styles (.shot-charts-page).
   Loaded by shot-charts.html and embeddable in cap-sheets. No global selectors outside .shot-charts-page. */

/* ---------- Standalone page (shot-charts.html only) ---------- */
.shot-charts-page { color-scheme:light; --bg:#f8f9f3; --panel:#fff; --soft:#eef3f1; --ink:#111; --muted:#4f5b55; --line:#d7ded9; --blue:#1f6feb; --green:#27845f; --gold:#f28c28; --gold-dark:#bd6515; --court:#fffdf8; --court-line:#2b2b2b; --shadow:0 12px 30px rgba(25,34,30,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shot-charts-page, .shot-charts-page * { box-sizing:border-box; }
.shot-charts-page { margin:0; min-height:100vh; background-color:var(--bg); background-image:linear-gradient(rgba(248,249,243,.84),rgba(248,249,243,.84)),url("../notebook-basketball-texture-prominent.png"); background-size:auto,760px 760px; color:var(--ink); }
.shot-charts-page a:not(.cap-brand-link) { color:inherit; } /* the brand lockup keeps its own ink (#17211f) */
.shot-charts-page input, .shot-charts-page select, .shot-charts-page button { font:inherit; }
.shot-charts-page .page { width:min(1360px,calc(100% - 40px)); margin:0 auto; padding:20px 0 34px; }
.shot-charts-page .nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 18px; }
.shot-charts-page .nav-links { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.shot-charts-page .nav-links a { border:1px solid var(--line); border-radius:6px; background:#fff; padding:9px 12px; text-decoration:none; font-size:13px; font-weight:800; }
.shot-charts-page .page-header { padding:18px 0 16px; display:grid; gap:12px; border-bottom:2px solid rgba(17,17,17,.12); margin-bottom:16px; }
.shot-charts-page .kicker { color:var(--gold-dark); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.shot-charts-page h1 { margin:0; max-width:980px; font-size:64px; line-height:.95; letter-spacing:0; }
.shot-charts-page .page-header p { margin:0; max-width:850px; color:var(--muted); font-size:17px; line-height:1.45; }
@media (max-width:900px) {
  .shot-charts-page .page { width:min(100% - 24px,1360px); padding-top:10px; }
  .shot-charts-page .nav { flex-direction:column; align-items:stretch; }
  .shot-charts-page .nav-links { justify-content:flex-start; }
  .shot-charts-page .nav-links a { min-height:44px; display:inline-flex; align-items:center; }
  .shot-charts-page h1 { font-size:42px; }
  .shot-charts-page .page-header p { font-size:15px; }
}

/* ---------- Renderer root (works standalone or embedded) ---------- */
.shot-charts { --sc-bg:#f8f9f3; --sc-panel:#fff; --sc-soft:#eef3f1; --sc-ink:#111; --sc-muted:#4f5b55; --sc-line:#d7ded9; --sc-blue:#1f6feb; --sc-gold:#f28c28; --sc-gold-dark:#bd6515; --sc-court:#fffdf8; --sc-court-line:#2b2b2b; --sc-shadow:0 12px 30px rgba(25,34,30,.08); --sc-deep:#1d4ed8; --sc-light:#7eaaf0; --sc-grey:#b8c4c0; --sc-yellow:#f1e58a; --sc-red:#e3342f; color:var(--sc-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; min-width:0; }
.shot-charts *, .shot-charts *::before, .shot-charts *::after { box-sizing:border-box; }
.shot-charts button, .shot-charts input { font:inherit; }
.shot-charts .control-panel, .shot-charts .court-panel { background:var(--sc-panel); border:1px solid var(--sc-line); border-radius:8px; box-shadow:var(--sc-shadow); }
.shot-charts .control-panel { padding:16px; display:grid; grid-template-columns:minmax(300px,1.3fr) minmax(240px,1fr) minmax(220px,300px); gap:14px 18px; align-items:start; margin-bottom:16px; }
.shot-charts .sc-field { display:grid; gap:6px; min-width:0; }
.shot-charts .sc-label { font-size:12px; font-weight:900; color:var(--sc-ink); }
.shot-charts .sc-hint { font-size:12px; color:var(--sc-muted); font-weight:600; }

/* Season type radios */
.shot-charts .sc-radios { display:flex; gap:6px; flex-wrap:wrap; }
.shot-charts .sc-radio { position:relative; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--sc-line); border-radius:6px; background:#fbfcfb; padding:8px 12px; font-size:13px; font-weight:800; cursor:pointer; min-height:40px; }
.shot-charts .sc-radio input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.shot-charts .sc-radio::before { content:""; width:14px; height:14px; border-radius:50%; border:2px solid #5a6660; background:#fff; flex:0 0 auto; }
.shot-charts .sc-radio.is-checked { border-color:var(--sc-gold); background:#fff7e8; }
.shot-charts .sc-radio.is-checked::before { border-color:var(--sc-gold-dark); background:radial-gradient(circle,var(--sc-gold-dark) 45%,#fff 50%); }
.shot-charts .sc-radio:has(input:focus-visible) { outline:3px solid rgba(31,111,235,.25); outline-offset:1px; }

/* Season chips (multi-select) */
.shot-charts .sc-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:132px; overflow:auto; padding:2px; }
.shot-charts .sc-chip { position:relative; display:inline-flex; align-items:center; border:1px solid var(--sc-line); border-radius:999px; background:#fbfcfb; padding:5px 11px; font-size:12px; font-weight:800; cursor:pointer; line-height:1.2; color:var(--sc-muted); user-select:none; }
.shot-charts .sc-chip input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.shot-charts .sc-chip.is-checked { background:var(--sc-ink); border-color:var(--sc-ink); color:#fff; }
.shot-charts .sc-chip:hover { border-color:var(--sc-gold); }
.shot-charts .sc-chip:has(input:focus-visible) { outline:3px solid rgba(31,111,235,.25); outline-offset:1px; }
.shot-charts .sc-chip-teams { margin-left:5px; font-size:10px; font-weight:800; letter-spacing:.02em; opacity:.85; }
.shot-charts .sc-chip-actions { display:flex; gap:10px; margin-top:2px; }
.shot-charts .sc-chip-actions button { border:0; background:none; padding:0; color:var(--sc-gold-dark); font-size:12px; font-weight:800; cursor:pointer; text-decoration:underline; }

/* Player combobox */
.shot-charts .sc-combo { position:relative; min-width:0; }
.shot-charts .sc-combo input { width:100%; min-height:40px; border:1px solid var(--sc-line); border-radius:6px; background:#fbfcfb; padding:8px 34px 8px 12px; font-size:14px; font-weight:800; color:var(--sc-ink); outline:none; }
.shot-charts .sc-combo input::placeholder { color:#8a948f; font-weight:600; }
.shot-charts .sc-combo input:focus { border-color:var(--sc-blue); box-shadow:0 0 0 3px rgba(31,111,235,.14); }
.shot-charts .sc-combo-arrow { position:absolute; right:13px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #33413a; pointer-events:none; }
.shot-charts .sc-combo-list { position:absolute; z-index:30; top:calc(100% + 5px); left:0; right:0; max-height:300px; overflow:auto; display:none; margin:0; padding:6px; list-style:none; border:1px solid rgba(17,17,17,.18); border-radius:8px; background:#fff; box-shadow:0 16px 34px rgba(17,17,17,.20); }
.shot-charts .sc-combo.is-open .sc-combo-list { display:block; }
.shot-charts .sc-combo-option { display:flex; justify-content:space-between; gap:8px; align-items:center; border:1px solid transparent; border-radius:6px; padding:7px 9px; font-size:13px; font-weight:800; cursor:pointer; }
.shot-charts .sc-combo-option small { color:var(--sc-muted); font-weight:700; font-size:11px; white-space:nowrap; }
.shot-charts .sc-combo-option:hover, .shot-charts .sc-combo-option.is-active { border-color:#f0a62f; background:#fff7e8; }
.shot-charts .sc-combo-option[aria-selected="true"] { background:#f3f6f4; }
.shot-charts .sc-combo-empty { padding:8px; color:var(--sc-muted); font-size:13px; font-weight:700; }

/* Actions + status */
.shot-charts .sc-actions { display:grid; gap:8px; align-content:start; }
.shot-charts .sc-button { min-height:40px; border:1px solid var(--sc-ink); border-radius:6px; background:var(--sc-ink); color:#fff; padding:8px 14px; font-size:13px; font-weight:900; cursor:pointer; }
.shot-charts .sc-button:hover { background:#2b2b2b; }
.shot-charts .sc-button:disabled { opacity:.55; cursor:not-allowed; }
.shot-charts .sc-button:focus-visible { outline:3px solid rgba(31,111,235,.3); outline-offset:2px; }
.shot-charts .sc-status { min-height:20px; color:var(--sc-muted); font-size:13px; line-height:1.4; font-weight:600; }

/* Chart panel */
.shot-charts .court-panel { padding:18px; min-width:0; position:relative; }
.shot-charts .sc-notice { margin:0 auto 12px; max-width:760px; border:1px solid #f0c27a; border-radius:6px; background:#fff7e8; padding:10px 12px; color:#7a4a05; font-size:13px; line-height:1.45; font-weight:700; }
.shot-charts .sc-notice[hidden] { display:none; }
.shot-charts .sc-figure { position:relative; width:100%; max-width:760px; margin:0 auto; min-height:120px; }
.shot-charts .sc-svg { display:block; width:100%; height:auto; background:var(--sc-court); border:1px solid var(--sc-line); border-radius:8px; }
.shot-charts .sc-svg text { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shot-charts .sc-overlay { position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:24px; color:var(--sc-muted); font-size:15px; font-weight:800; background:rgba(255,255,255,.72); border-radius:8px; }
.shot-charts .sc-figure.is-loading .sc-overlay, .shot-charts .sc-figure.is-empty .sc-overlay { display:grid; }
.shot-charts .sc-figure.is-loading .sc-svg { opacity:.35; }
.shot-charts .sc-figure.is-empty .sc-svg { opacity:.25; }

/* HTML stats block (shown when the figure is narrow; the SVG footer is shown when wide) */
.shot-charts .sc-stats { display:none; max-width:760px; margin:12px auto 0; gap:12px; }
.shot-charts.is-narrow .sc-stats { display:grid; }
.shot-charts .sc-stats-headline { display:flex; align-items:baseline; justify-content:center; gap:16px; flex-wrap:wrap; }
.shot-charts .sc-stats-headshot { align-self:center; height:52px; width:auto; flex:0 0 auto; }
.shot-charts .sc-stats-efg { font-size:24px; font-weight:900; }
.shot-charts .sc-stats-shots { font-size:14px; font-weight:800; color:var(--sc-muted); }
.shot-charts .sc-page-link { font-size:13px; font-weight:800; color:#a95009; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.shot-charts .sc-page-link-text { text-decoration:underline; cursor:pointer; }
.shot-charts .sc-stats-table { width:100%; border-collapse:collapse; font-size:13px; }
.shot-charts .sc-stats-table th, .shot-charts .sc-stats-table td { border:1px solid var(--sc-line); padding:6px 8px; text-align:center; }
.shot-charts .sc-stats-table th { font-weight:900; background:#fbfcfb; }
.shot-charts .sc-stats-table td:first-child { text-align:left; font-weight:800; }
.shot-charts .method-note { margin:14px auto 0; max-width:760px; color:var(--sc-muted); font-size:13px; line-height:1.5; font-weight:600; }
.shot-charts .method-note a { color:inherit; }

/* Zone overlay (update({ zoneOverlay: true })): the HTML zone legend shown in the narrow layout */
.shot-charts .sc-zone-legend { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:4px 14px; font-size:12px; font-weight:800; color:var(--sc-ink); }
.shot-charts .sc-zone-legend li { display:flex; align-items:center; gap:7px; min-width:0; }
.shot-charts .sc-zone-legend small { margin-left:auto; color:var(--sc-muted); font-weight:700; font-size:11px; white-space:nowrap; }
.shot-charts .sc-zone-swatch { width:12px; height:12px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(17,17,17,.15); }

/* Narrow layout (figure < 640px; tiny < 440px): bigger in-court labels, SVG footer hidden by JS viewBox switch, HTML stats shown */
.shot-charts.is-narrow .sc-zone-label text { font-size:14px; stroke:#fffdf8; stroke-width:4px; stroke-linejoin:round; paint-order:stroke; }
.shot-charts.is-tiny .sc-zone-label text { font-size:17px; }
.shot-charts.is-narrow .sc-zone-label rect { display:none; }
/* Corner-3 labels are rotated into the sideline gutter (30 units wide): keep them under that width. */
.shot-charts.is-narrow .sc-zone-label--gutter text { font-size:13px; }
.shot-charts.is-tiny .sc-zone-label--gutter text { font-size:15px; }
.shot-charts.is-narrow .sc-title { font-size:24px; }
.shot-charts.is-tiny .sc-title { font-size:26px; }
.shot-charts.is-narrow .sc-title--long { font-size:20px; }
.shot-charts.is-tiny .sc-title--long { font-size:21px; }
.shot-charts.is-narrow .sc-subtitle { font-size:12.5px; }
.shot-charts.is-tiny .sc-subtitle { font-size:14px; }
.shot-charts.is-narrow .sc-size-legend text { font-size:13px; }
.shot-charts.is-tiny .sc-size-legend text { font-size:15px; }
.shot-charts.is-narrow .sc-footer { display:none; }

/* Compact embed mode */
.shot-charts.shot-charts--compact .control-panel { padding:12px; gap:10px 12px; grid-template-columns:1fr; margin-bottom:10px; box-shadow:none; }
.shot-charts.shot-charts--compact .court-panel { padding:10px; box-shadow:none; }
.shot-charts.shot-charts--compact .method-note { font-size:12px; margin-top:10px; }
.shot-charts.shot-charts--embedded .court-panel { border:0; box-shadow:none; padding:0; }

@media (max-width:1180px) { .shot-charts .control-panel { grid-template-columns:1fr 1fr; } .shot-charts .sc-actions { grid-column:1 / -1; } }
@media (max-width:900px) {
  .shot-charts .control-panel { grid-template-columns:1fr; padding:12px; }
  .shot-charts .sc-actions { grid-column:auto; }
  .shot-charts .sc-chips { max-height:none; }
  .shot-charts .court-panel { padding:8px; }
  .shot-charts .sc-button { min-height:44px; }
  .shot-charts .method-note { padding:0 4px; }
}

.shot-charts .sc-height-button[aria-pressed="true"] { background: #233b56; color: white; }
.shot-charts .sc-benchmark { font-size: 12px; color: #59616b; margin: 8px 0 12px; }

.sc-height-control { display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:12px; font-weight:700; white-space:nowrap; }
.sc-height-switch { position:relative; width:44px; height:26px; padding:0; border:1px solid #657079; border-radius:999px; background:#cbd1d5; cursor:pointer; flex:0 0 auto; }
.sc-height-switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 1px 3px #0003; transition:transform .12s ease; }
.sc-height-switch[aria-checked="true"] { background:#233b56; border-color:#233b56; }
.sc-height-switch[aria-checked="true"]::after { transform:translateX(18px); }
.sc-height-state { min-width:20px; }
.sc-height-switch:focus-visible { outline:2px solid #233b56; outline-offset:4px; }

.shot-charts .sc-height-comparison, .shot-charts .sc-volume-comparison { display:table; width:100%; margin-top:14px; font-size:11px; }
.shot-charts .sc-height-comparison caption, .shot-charts .sc-volume-comparison caption { text-align:left; margin-bottom:8px; font-weight:700; }
.shot-charts .sc-height-comparison th:first-child, .shot-charts .sc-volume-comparison th:first-child { text-align:left; }
