/* ── Assessments / Skills tab ──────────────────────────────────────────────
   Mobile-first. Designed for sideline use on phones.
   Reuses CSS vars from base.css: --bg --surf --surf2 --bdr --green --bright
   --dim --lime --cream --muted --red
   ────────────────────────────────────────────────────────────────────────── */

#pg-assessments-inner { padding: 16px 14px 88px; max-width: 720px; margin: 0 auto; }

#pg-assessments .pg-hd-sub {
  font-size: 13px; color: var(--muted); margin-top: 2px;
}

/* ── Sport selector ─────────────────────────────────────────────────────── */

.as-sport-bar {
  display: flex; gap: 8px; margin: 14px 0 16px;
  background: var(--surf2); padding: 4px; border-radius: 12px;
  border: 1px solid var(--bdr);
}
.as-sport-btn {
  flex: 1; min-height: 44px; padding: 8px 12px;
  background: transparent; color: var(--muted); border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.as-sport-btn [data-lucide] { width: 16px; height: 16px; }
.as-sport-btn.on {
  background: var(--surf); color: var(--cream);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px var(--bdr);
}
.as-sport-btn:not(.on):active { background: rgba(0,0,0,.03); }

/* ── Actions row (Start new assessment) ─────────────────────────────────── */

.as-actions { margin: 0 0 12px; }
.as-actions .btn-lg {
  width: 100%; min-height: 56px; padding: 14px 18px;
  font-size: 16px; font-weight: 700; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.as-actions .btn-lg [data-lucide] { width: 20px; height: 20px; }
.as-actions .btn-lg:active { transform: translateY(1px); }

/* ── Sync indicator row ─────────────────────────────────────────────────── */

.as-sync-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
  padding: 6px 4px; margin-bottom: 10px;
}
.as-sync-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  transition: background .2s;
}
.as-sync-dot.synced  { background: var(--lime); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.as-sync-dot.pending { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); animation: as-pulse 1.2s ease-in-out infinite; }
.as-sync-dot.offline { background: var(--red);  box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
@keyframes as-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}

/* ── Section ────────────────────────────────────────────────────────────── */

.as-section { margin-top: 18px; }
.as-section-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; padding: 0 2px;
}
.as-section-hd h3 {
  font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
.as-section-count { font-size: 12px; color: var(--muted); }

/* ── Recent sessions list ───────────────────────────────────────────────── */

.as-recent-list {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  overflow: hidden;
}
.as-session-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid var(--bdr);
  cursor: pointer; transition: background .12s;
  min-height: 64px;
}
.as-session-row:last-child { border-bottom: none; }
.as-session-row:active { background: var(--surf2); }

.as-session-date {
  flex: 0 0 44px; text-align: center;
  background: var(--dim); border-radius: 8px; padding: 6px 4px;
}
.as-session-day {
  font-size: 18px; font-weight: 800; color: var(--green);
  line-height: 1;
}
.as-session-month {
  font-size: 10px; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}
.as-session-meta { flex: 1; min-width: 0; }
.as-session-title { font-size: 15px; font-weight: 700; color: var(--cream); }
.as-session-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.as-session-arrow [data-lucide] { width: 20px; height: 20px; color: var(--muted); }

/* ── Export button (under the history tile row) ─────────────────────────── */

.as-export-btn {
  width: 100%; min-height: 44px; margin-top: 10px;
  background: var(--surf); color: var(--muted);
  border: 1px solid var(--bdr); border-radius: 10px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: background .12s, color .12s;
}
.as-export-btn:hover { background: var(--surf2); color: var(--cream); }
.as-export-btn:active { transform: translateY(1px); }
.as-export-btn[disabled] { opacity: .6; cursor: not-allowed; }
.as-export-btn [data-lucide] { width: 16px; height: 16px; }

/* ── History tile row (Heatmap / Player Progress entry points) ──────────── */

.as-tile-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.as-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 14px; min-height: 96px;
  text-align: left; cursor: pointer;
  transition: transform .1s, box-shadow .15s;
}
.as-tile:active { transform: translateY(1px); }
.as-tile:hover  { box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.as-tile-icon {
  width: 22px; height: 22px; color: var(--green);
}
.as-tile-title { font-size: 14px; font-weight: 700; color: var(--cream); }
.as-tile-sub   { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* ── Empty / error states ───────────────────────────────────────────────── */

.as-empty {
  padding: 22px 18px; text-align: center; color: var(--muted);
  font-size: 13px; line-height: 1.5;
}
.as-empty p { margin: 0 0 6px; }
.as-empty p:last-child { margin-bottom: 0; }
.as-empty.as-error { color: var(--red); }
.as-empty code {
  background: var(--surf2); padding: 2px 6px; border-radius: 4px;
  font-size: 11px; color: var(--cream);
}

/* ── Recording / sub-views: shared header back button ───────────────────── */

.as-back-btn {
  background: transparent; border: none; color: var(--muted);
  font-size: 14px; font-weight: 600; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; min-height: 36px;
}
.as-back-btn [data-lucide] { width: 16px; height: 16px; }
.as-back-btn:active { color: var(--cream); }

.as-recording-body { margin-top: 14px; }

/* ── Wider screens: a touch more breathing room ─────────────────────────── */

@media (min-width: 720px) {
  #pg-assessments-inner { padding: 24px 20px 100px; }
  .as-tile { min-height: 110px; padding: 18px; }
  .as-tile-icon { width: 26px; height: 26px; }
  .as-tile-title { font-size: 15px; }
}

/* ── Phase 4: Recording UI ───────────────────────────────────────────────── */

/* Toolbar: by-player / by-skill toggle + progress */
.asr-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 14px;
}
.asr-view-toggle {
  flex: 1; display: flex; gap: 4px;
  background: var(--surf2); padding: 4px; border-radius: 10px;
  border: 1px solid var(--bdr);
}
.asr-toggle-btn {
  flex: 1; min-height: 38px; padding: 6px 10px;
  background: transparent; color: var(--muted); border: none; border-radius: 7px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, color .12s;
}
.asr-toggle-btn [data-lucide] { width: 14px; height: 14px; }
.asr-toggle-btn.on {
  background: var(--surf); color: var(--cream);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px var(--bdr);
}
.asr-progress {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--surf2); padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--bdr); white-space: nowrap;
}

/* Player grid (by-player view) */
.asr-player-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.asr-player-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 12px; min-height: 92px;
  text-align: left; cursor: pointer;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.asr-player-card:active { transform: translateY(1px); }
.asr-player-card:hover  { box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.asr-player-card.has-scores { border-color: var(--green); }
.asr-player-card.other-coach { border-style: dashed; }
.asr-player-card.locked {
  border-color: #f59e0b;
  background: #fffaf0;
}
.asr-player-card.locked .asr-jersey { background: #fef3c7; color: #b45309; }

.asr-jersey {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  background: var(--dim); color: var(--green);
  font-size: 14px; font-weight: 800; border-radius: 8px;
}
.asr-jersey-empty { color: var(--muted); }
.asr-jersey-empty [data-lucide] { width: 16px; height: 16px; }
.asr-jersey-sm { min-width: 24px; height: 24px; font-size: 12px; padding: 0 5px; border-radius: 6px; }

.asr-pname { font-size: 14px; font-weight: 700; color: var(--cream); line-height: 1.25; }
.asr-pmeta { font-size: 11px; color: var(--muted); margin-top: auto; }
.asr-pmeta [data-lucide] { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.asr-pmeta-done  { color: var(--green); font-weight: 600; }
.asr-pmeta-other { color: var(--muted); font-style: italic; }
.asr-pmeta-empty { color: var(--muted); }
.asr-pmeta-locked { color: #b45309; font-weight: 700; }

/* Skill grid (by-skill view) */
.asr-skill-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.asr-skill-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 14px;
  text-align: left; cursor: pointer; min-height: 64px;
  transition: transform .1s, box-shadow .15s;
}
.asr-skill-card:active { transform: translateY(1px); }
.asr-skill-card-name { font-size: 14px; font-weight: 700; color: var(--cream); }
.asr-skill-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted);
}
.asr-skill-card-count { font-weight: 700; color: var(--green); }

/* Detail headers (player-detail and skill-detail) */
.asr-detail-hd {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--bdr);
}
.asr-detail-title {
  display: flex; align-items: center; gap: 10px;
}
.asr-detail-title h2,
.asr-detail-title h3 {
  font-size: 18px; font-weight: 800; color: var(--cream); margin: 0;
}
.asr-detail-sub { font-size: 12px; color: var(--muted); }

.asr-detail-body, .asr-skill-detail-body {
  display: flex; flex-direction: column; gap: 14px;
}

.asr-group-hd {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: 8px; padding: 0 2px;
}

/* Skill block (in player detail view) */
.asr-skill-block {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 12px;
}
.asr-skill-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.asr-skill-name {
  font-size: 14px; font-weight: 700; color: var(--cream);
  display: inline-flex; align-items: center; gap: 6px;
}
.asr-points {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--green);
  background: var(--dim); padding: 2px 7px; border-radius: 999px;
}
.asr-info {
  background: transparent; border: none; color: var(--muted);
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.asr-info:active { background: var(--surf2); color: var(--cream); }
.asr-info [data-lucide] { width: 16px; height: 16px; }
.asr-skill-desc {
  font-size: 12px; color: var(--muted); line-height: 1.4;
  background: var(--surf2); border-radius: 8px;
  padding: 8px 10px; margin: 0 0 10px;
}

/* Sides (L/R) */
.asr-sides {
  display: flex; flex-direction: column; gap: 10px;
}
.asr-side {
  display: flex; align-items: center; gap: 10px;
}
.asr-side-label {
  flex: 0 0 38px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Skill-detail rows (one row per player) */
.asr-skill-row {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 12px;
}
.asr-skill-row-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--cream);
}

/* ── Score widgets (shared) ─────────────────────────────────────────────── */

.asr-widget {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surf2); border: 1px solid var(--bdr); border-radius: 10px;
  padding: 6px;
  min-height: 52px;
}

.asr-step-btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surf); color: var(--cream); border: 1px solid var(--bdr);
  border-radius: 8px; font-size: 22px; font-weight: 700;
  cursor: pointer; transition: background .12s, transform .08s;
  -webkit-user-select: none; user-select: none;
}
.asr-step-btn:active { transform: translateY(1px); background: var(--dim); }
.asr-step-btn[disabled] { opacity: .4; cursor: not-allowed; }
.asr-step-btn [data-lucide] { width: 18px; height: 18px; }
.asr-clear-btn { font-size: 14px; }

.asr-count-value {
  flex: 1; min-width: 0; text-align: center;
  font-size: 22px; font-weight: 800; color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
}
.asr-count-max, .asr-count-unit {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}

/* Timer/stopwatch button (countInTime + timeTaken) */
.asr-timer-btn {
  width: 56px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--green); color: #fff; border: none; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .12s, transform .08s;
}
.asr-timer-btn:active { transform: translateY(1px); }
.asr-timer-btn [data-lucide] { width: 16px; height: 16px; }
.asr-timer-btn.running { background: var(--red); }
.asr-time-display { font-variant-numeric: tabular-nums; }

/* Tick (yes/no) widget */
.asr-widget-tick { padding: 4px; gap: 4px; }
.asr-tick-btn {
  flex: 1; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surf); color: var(--muted); border: 1px solid var(--bdr);
  border-radius: 8px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.asr-tick-btn [data-lucide] { width: 16px; height: 16px; }
.asr-tick-yes.active { background: var(--green); color: #fff; border-color: var(--green); }
.asr-tick-no.active  { background: var(--red);   color: #fff; border-color: var(--red); }

/* Notes (collapsed by default) */
.asr-notes {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 10px 12px;
}
.asr-notes summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cream);
  display: inline-flex; align-items: center; gap: 6px;
  list-style: none;
}
.asr-notes summary::-webkit-details-marker { display: none; }
.asr-notes summary [data-lucide] { width: 14px; height: 14px; color: var(--muted); }
.asr-notes-has { color: var(--green); font-size: 16px; line-height: 1; }
.asr-notes-input {
  width: 100%; box-sizing: border-box; margin-top: 8px;
  min-height: 64px; padding: 8px 10px;
  background: var(--surf2); border: 1px solid var(--bdr); border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--cream); resize: vertical;
}
.asr-notes-input:focus { outline: 2px solid var(--green); outline-offset: -1px; }

.asr-empty {
  padding: 18px; text-align: center; color: var(--muted);
  font-size: 13px; line-height: 1.5;
  background: var(--surf2); border-radius: 10px;
}

/* Wider screens: more comfortable layout */
@media (min-width: 540px) {
  .asr-player-grid { grid-template-columns: repeat(3, 1fr); }
  .asr-skill-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .asr-player-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Phase 7: History views ──────────────────────────────────────────────── */

/* Heatmap meta + legend */
.ash-heatmap-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted);
  padding: 6px 4px; margin-bottom: 8px;
}
.ash-meta-label { display: inline-flex; align-items: center; gap: 6px; }
.ash-meta-label [data-lucide] { width: 14px; height: 14px; }
.ash-meta-legend { display: inline-flex; align-items: center; gap: 4px; }
.ash-legend-chip {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--bdr); margin: 0 2px 0 6px;
}

/* Heatmap table */
.ash-heatmap-wrap {
  overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
}
.ash-heatmap {
  border-collapse: separate; border-spacing: 0;
  font-size: 12px;
}
.ash-heatmap th, .ash-heatmap td {
  padding: 8px 6px; text-align: center; min-width: 56px;
  border-bottom: 1px solid var(--bdr);
  border-right: 1px solid var(--bdr);
  white-space: nowrap;
}
.ash-heatmap th { font-weight: 700; color: var(--cream); background: var(--surf); }
.ash-heatmap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surf); border-bottom: 2px solid var(--bdr);
}
.ash-heatmap .ash-corner {
  position: sticky; left: 0; top: 0; z-index: 3;
  background: var(--surf); text-align: left;
  min-width: 130px; padding-left: 12px;
}
.ash-heatmap .ash-skill-col {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.ash-heatmap .ash-player-cell {
  position: sticky; left: 0; z-index: 1;
  background: var(--surf); text-align: left; cursor: pointer;
  padding-left: 12px; padding-right: 12px;
  white-space: nowrap;
}
.ash-heatmap .ash-player-cell .ash-jersey { margin-right: 8px; vertical-align: middle; }
.ash-heatmap .ash-player-cell .ash-pname  { vertical-align: middle; }
.ash-heatmap .ash-player-cell:hover { background: var(--surf2); }
.ash-jersey {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  background: var(--dim); color: var(--green);
  font-size: 12px; font-weight: 800; border-radius: 6px;
}
.ash-jersey-empty { color: var(--muted); }
.ash-jersey-empty [data-lucide] { width: 14px; height: 14px; }
.ash-pname { font-size: 13px; font-weight: 700; color: var(--cream); }

.ash-cell {
  font-weight: 700; color: #1a1c1e;
  font-variant-numeric: tabular-nums;
}
.ash-cell-empty { color: var(--muted); background: var(--surf2); font-weight: 400; }

.ash-hint {
  font-size: 12px; color: var(--muted);
  text-align: center; margin: 10px 4px 4px;
}

/* Player picker grid (per-player history) */
.ash-picker-hd {
  font-size: 13px; color: var(--muted);
  margin: 4px 4px 12px;
}
.ash-player-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.ash-player-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 12px;
  text-align: left; cursor: pointer; min-height: 92px;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.ash-player-card:active { transform: translateY(1px); }
.ash-player-card:hover  { box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.ash-pcard-sub {
  font-size: 11px; color: var(--muted);
  margin-top: auto;
}

/* Player detail */
.ash-detail-hd {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--bdr);
}
.ash-detail-title {
  display: flex; align-items: center; gap: 10px;
}
.ash-detail-title h3 {
  font-size: 18px; font-weight: 800; color: var(--cream); margin: 0;
}
.ash-detail-sub { font-size: 12px; color: var(--muted); }

.ash-section-hd {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 16px 2px 8px;
}

/* Skill chip selector */
.ash-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.ash-chip {
  background: var(--surf); color: var(--muted);
  border: 1px solid var(--bdr); border-radius: 999px;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; min-height: 32px;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ash-chip:active { transform: translateY(1px); }
.ash-chip.on {
  background: var(--green); color: #fff; border-color: var(--green);
}

/* Chart */
.ash-chart-wrap {
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
  padding: 8px; margin-bottom: 6px;
}
.ash-chart {
  width: 100%; height: auto; max-height: 240px;
  display: block;
}

/* Score table */
.ash-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px;
}
.ash-table {
  border-collapse: separate; border-spacing: 0; font-size: 12px;
  width: 100%;
}
.ash-table th, .ash-table td {
  padding: 8px; text-align: center;
  border-bottom: 1px solid var(--bdr);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ash-table thead th {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
  background: var(--surf2);
}
.ash-table .ash-corner {
  position: sticky; left: 0; z-index: 1;
  background: var(--surf2); text-align: left; padding-left: 12px;
  min-width: 140px;
}
.ash-table .ash-skill-cell {
  position: sticky; left: 0; background: var(--surf);
  text-align: left; padding-left: 12px;
  font-weight: 600; color: var(--cream);
  border-right: 1px solid var(--bdr);
}
.ash-table tbody tr:last-child th,
.ash-table tbody tr:last-child td { border-bottom: none; }

@media (min-width: 540px) {
  .ash-player-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
  .ash-player-grid { grid-template-columns: repeat(4, 1fr); }
}