/* ── Layout / spacing tokens (non-color — stays here across all themes) ──── */

:root {
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  --nav-height: 56px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Interim wrap (2026-06-08 nav touch-up): allow the nav to flow to a
     second row when the coach link set overflows the viewport instead of
     scrolling off-screen. min-height replaces height so the row can grow.
     Superseded by the future dropdown/sidebar redesign. The mobile rule
     below intentionally overrides flex-wrap back to nowrap and uses the
     horizontal-scroll affordance on narrow viewports. */
  min-height: var(--nav-height);
  background: var(--bg-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  flex: 1;
}

.nav-brand a { color: inherit; text-decoration: none; }

.nav-link {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  text-decoration: none;
}

/* Mobile: nav becomes a horizontally scrollable strip so right-side items
   (Sign Out, role badge) stay reachable on narrow viewports. Scrollbar is
   hidden; touch-momentum scrolling enabled. */
@media (max-width: 768px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav > * {
    flex-shrink: 0;
  }

  /* Desktop gives the brand flex: 1 so links push to the right; on mobile
     that would shove the link strip offscreen before scrolling helps. */
  .nav-brand {
    flex: 0 0 auto;
  }

  .nav > *:last-child {
    margin-right: 1rem;
  }
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page {
  padding: 28px 0 60px;
}

/* Mobile: tighten container padding to 16px and stack filter rows so labels
   sit above their pill groups (otherwise the label only spans one wrapped
   row visually and disconnects from the rest of the pills). */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group > .filter-label {
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .filter-group > .filter-pills {
    width: 100%;
  }
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.page-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 680px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-body {
  padding: 20px;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 16px;
}

.form-group:last-of-type {
  margin-bottom: 0;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7878' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, filter 0.15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-danger {
  background: var(--error);
  color: var(--text-primary);
}

.btn-danger:hover:not(:disabled) { filter: brightness(1.15); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-full { width: 100%; }

/* ── Table ───────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: rgba(80, 0, 0, 0.08); }

.td-muted { color: var(--text-muted); font-size: 13px; }

/* Reusable: pin the first column of any .table-wrap to the left during
   horizontal scroll. Add the .has-sticky-first-col modifier on the wrapper.
   Backgrounds must be opaque so scrolling cells don't bleed through. */
.table-wrap.has-sticky-first-col th:first-child,
.table-wrap.has-sticky-first-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-surface);
}

.table-wrap.has-sticky-first-col th:first-child {
  z-index: 2;
  background: var(--bg-primary);
}

/* Row-hover sets td bg to a translucent tint; for sticky cells that float
   over scrolling content, keep the bg solid so other cells don't bleed
   through during scroll. */
.table-wrap.has-sticky-first-col tbody tr:hover td:first-child {
  background: var(--bg-surface);
}

/* ── Kebab (3-dot) row-action menu ───────────────────────────────────────── */

.actions-cell {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.kebab-wrap {
  position: relative;
  display: inline-block;
}

.kebab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.kebab-btn:hover,
.kebab-btn[aria-expanded="true"] {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}

.kebab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 140px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 4px;
  z-index: 50;
}

.kebab-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-family: inherit;
}

.kebab-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 99px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.badge-beginner {
  background: rgba(22, 163, 74, 0.15);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: var(--success);
}

.badge-intermediate {
  background: rgba(80, 0, 0, 0.25);
  border: 1px solid rgba(80, 0, 0, 0.50);
  color: #d4a4a4;
}

.badge-advanced {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: var(--error);
}

/* ── Alert / Banner ──────────────────────────────────────────────────────── */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 16px;
  display: none;
}

.alert.show { display: block; }

.alert-error {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: var(--error);
}

.alert-success {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: var(--success);
}

/* ── Login page specific ─────────────────────────────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border);
}

.login-header {
  padding: 28px 32px 20px;
  background: var(--accent);
  text-align: center;
}

.login-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.login-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.login-body {
  padding: 28px 32px;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */

.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.w-full { width: 100%; }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Day chips (coach + player completion views) ─────────────────────────── */

.day-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px 2px 2px 0;
  border: 1px solid transparent;
  user-select: none;
}

.day-chip-complete {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.40);
  color: var(--success);
}

.day-chip-incomplete {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ── Player assignment page ──────────────────────────────────────────────── */

.player-day-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.player-day-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.player-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.completion-form {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.video-upload-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.video-required-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 99px;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #f97316;
}

.progress-bar-wrap {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.2s ease;
}

/* ── Utility additions ───────────────────────────────────────────────────── */

.gap-16 { gap: 16px; }

/* ── Drill category + context badges ────────────────────────────────────── */

.cat-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: capitalize;
}

.cat-hitting     { background: rgba(251, 146,  60, 0.18); color: #fb923c; border: 1px solid rgba(251, 146,  60, 0.40); }
.cat-catching    { background: rgba( 59, 130, 246, 0.18); color: #60a5fa; border: 1px solid rgba( 59, 130, 246, 0.40); }
.cat-throwing    { background: rgba( 34, 197,  94, 0.18); color: #4ade80; border: 1px solid rgba( 34, 197,  94, 0.40); }
.cat-infield     { background: rgba(168,  85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168,  85, 247, 0.40); }
.cat-outfield    { background: rgba( 20, 184, 166, 0.18); color: #2dd4bf; border: 1px solid rgba( 20, 184, 166, 0.40); }
.cat-pitching    { background: rgba(220,  38,  38, 0.18); color: #f87171; border: 1px solid rgba(220,  38,  38, 0.40); }
.cat-baserunning { background: rgba(234, 179,   8, 0.18); color: #facc15; border: 1px solid rgba(234, 179,   8, 0.40); }
.cat-conditioning{ background: rgba(156, 163, 175, 0.18); color: #d1d5db; border: 1px solid rgba(156, 163, 175, 0.40); }

.ctx-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* D4 — drill library video presence badge. Same chip geometry as .ctx-badge;
   the ▶ glyph and heavier weight distinguish it, NOT hue. Deliberately not
   var(--accent): accent-on-elevated measures 3.57:1 in default-dark and
   3.84:1 in neutral-dark, under AA for 11px text. --text-primary is safe in
   all 12 themes. */
.video-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  white-space: nowrap;
}

/* ── Player card grid ────────────────────────────────────────────────────── */

.player-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .player-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .player-card-grid { grid-template-columns: 1fr; }

  /* Assignments page: lock to viewport width on mobile so wide header rows
     (week navigator, +Assign Drill button group) clip instead of forcing
     horizontal page scroll. Scoped via .assignments-page so other pages
     (Drill Library) keep their intentional horizontal-scroll surfaces. */
  .assignments-page {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .assignments-page .player-card {
    max-width: 100%;
  }
}

/* ── Player card (3D flip) ───────────────────────────────────────────────── */

.player-card {
  perspective: 900px;
  background: transparent;
  border: none;
  padding: 0;
  min-height: 230px;
}

.card-inner {
  position: relative;
  width: 100%;
  min-height: 230px;
  transform-style: preserve-3d;
  transition: transform 0.38s ease;
}

.player-card[data-flipped="true"] .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.card-back {
  transform: rotateY(180deg);
  overflow-y: auto;
}

.player-card:hover .card-front {
  border-color: var(--accent);
  transition: border-color 0.15s;
}

/* Front face */

.front-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.front-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.front-jersey {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.front-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--text-muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.stat-avg-large {
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-frac {
  font-size: 13px;
  color: var(--bg-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.front-stat.stat-empty .stat-avg-large { color: var(--text-muted); }
.front-stat.stat-low .stat-avg-large { color: rgba(239, 68, 68, 0.85); }
.front-stat.stat-developing .stat-avg-large { color: rgba(234, 179, 8, 0.9); }
.front-stat.stat-decent .stat-avg-large { color: var(--text-secondary); }
.front-stat.stat-good .stat-avg-large { color: rgba(34, 197, 94, 0.95); }

.player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-chip {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.card-action-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-card-action {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: block;
}

.btn-card-action:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--accent);
  text-decoration: none;
}

.btn-expand {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-expand:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  border-color: var(--accent-hover);
  text-decoration: none;
}

/* Back face */

.back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.back-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.flip-hint {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  flex: 0;
  padding: 3px 8px;
}

.back-drill-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}

.back-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  padding: 4px 0;
}

.drill-row-back {
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drill-name-back {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.drill-row-back .day-chip {
  font-size: 11px;
  padding: 2px 8px;
}

/* Shared drill row components (used in player page) */

.drill-row-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.day-chip.day-done {
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.40);
  color: rgba(134, 239, 172, 1);
}

.drill-row-notes {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.btn-remove-small {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-remove-small:hover {
  border-color: var(--error);
  color: var(--error);
}

/* ── Player profile page ──────────────────────────────────────────────────── */

.back-link {
  font-size: 13px;
  color: var(--text-muted);
}

.back-link:hover { color: var(--text-primary); }

.player-page-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.player-page-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.player-page-jersey {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
}

.player-page-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.player-page-stat {
  flex: 1;
  min-width: 100px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-page-stat-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
}

.player-page-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.player-page-drill-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-page-drill-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-page-drill-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.player-page-drill-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.player-page-drill-prescription {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Form section headers ────────────────────────────────────────────────── */

.form-section-header {
  margin: 20px 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Chip input ──────────────────────────────────────────────────────────── */

.chip-input {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-secondary);
}

.chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
}

.chip-remove:hover { color: var(--error); }

/* ── Position checkboxes ─────────────────────────────────────────────────── */

.position-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.position-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.position-check input[type="checkbox"] {
  display: none;
}

.position-check:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ── Form actions ────────────────────────────────────────────────────────── */

.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Drill library filter bar ────────────────────────────────────────────── */

.drill-filters {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 64px;
  flex-shrink: 0;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.filter-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
  line-height: 1.4;
}

.filter-pill:hover:not(.is-active) {
  border-color: var(--accent);
  color: var(--text-primary);
}

.filter-pill.is-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* Category-specific active colors */
.filter-pill.cat-hitting.is-active     { background: #f97316; border-color: #f97316; color: #fff; }
.filter-pill.cat-catching.is-active    { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.filter-pill.cat-throwing.is-active    { background: #16a34a; border-color: #16a34a; color: #fff; }
.filter-pill.cat-infield.is-active     { background: #a855f7; border-color: #a855f7; color: #fff; }
.filter-pill.cat-outfield.is-active    { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.filter-pill.cat-pitching.is-active    { background: #ef4444; border-color: #ef4444; color: #fff; }
.filter-pill.cat-baserunning.is-active { background: #ca8a04; border-color: #ca8a04; color: #fff; }
.filter-pill.cat-conditioning.is-active{ background: #6b7280; border-color: #6b7280; color: #fff; }

.filter-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn-link {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  white-space: nowrap;
  padding: 0;
}

.btn-link:hover { color: var(--text-primary); }

.filter-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ── Progression column ──────────────────────────────────────────────────── */

.col-progression {
  text-align: center;
  width: 90px;
}

.progression-empty {
  color: var(--text-muted);
}

.progression-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  cursor: help;
}

#positionPills .filter-pill {
  min-width: 36px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.col-positions {
  white-space: nowrap;
  max-width: 200px;
}

.pos-badge {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  margin-right: 3px;
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .col-positions {
    max-width: 120px;
    white-space: normal;
  }
}

.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 12px;
  margin-top: 4px;
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 120ms ease;
  white-space: nowrap;
}

.mode-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.mode-btn.is-active {
  background: var(--accent);
  color: var(--on-accent, #ffffff);
}

.mode-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}

@media (max-width: 768px) {
  .mode-toggle {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── Practice Planner chat UI ────────────────────────────────────────────── */

.nav-link-active {
  color: #fff;
  font-weight: 600;
  opacity: 1;
}

/* ── Videos page (Slice K Prompt 3) ──────────────────────────────────────── */

.video-card-list {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.video-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 120ms;
}

.video-card:hover {
  background: var(--bg-elevated);
}

.video-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.video-card-date {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.video-card-drill {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.video-card-player {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.video-card-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.video-row {
  cursor: pointer;
}

.video-row:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* Mobile: hide table, show card list */
@media (max-width: 768px) {
  #videosTableCard {
    display: none;
  }
  .video-card-list {
    display: flex;
  }
}

/* Status pills — explicit hex per Standing Rule 15 (guaranteed contrast
   regardless of theme tokens). */
.video-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
}

.video-status-unreviewed {
  color: #d4a017;
}

.video-status-acknowledged {
  color: #2563eb;
}

.video-status-commented {
  color: #16a34a;
}

/* Playback modal — explicit colors, not theme tokens, so contrast is
   guaranteed across themes (Day 4 modal CSS lesson). */
.video-modal-card {
  background: #111111;
  border: 1px solid #2a2a2a;
  color: #ffffff;
  max-width: 720px;
  width: 92vw;
  padding: 0;
  overflow: hidden;
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2a2a;
  gap: 12px;
}

.video-modal-title {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
  overflow-wrap: anywhere;
}

.video-modal-close {
  background: transparent;
  border: none;
  color: #cccccc;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.video-modal-body {
  padding: 16px 18px 18px;
}

.video-modal-body video {
  width: 100%;
  max-height: 60vh;
  background: #000000;
  border-radius: 6px;
  display: block;
}

.video-modal-error {
  background: #2a1a1a;
  border: 1px solid #5a2a2a;
  color: #f8c8c8;
  padding: 16px;
  border-radius: 6px;
  text-align: center;
}

.video-modal-error p {
  margin: 0 0 10px;
}

.video-modal-meta {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #dddddd;
}

.video-modal-meta-label {
  color: #888888;
  display: inline-block;
  min-width: 80px;
  margin-right: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Skill Evaluations Scope 2 (Slice H Scope 2 Prompt 4) ──────────────── */

.eval-mode-toggle {
  display: flex;
  gap: 6px;
}

.eval-mode-pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.eval-mode-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.eval-mode-pill-active {
  background: var(--accent);
  color: var(--on-accent, #ffffff);
  border-color: var(--accent);
}

.structured-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.form-field-sub {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.char-counter {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.eval-rating-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.eval-rating-buttons-small {
  margin-top: 4px;
}

.eval-rating-button {
  flex: 0 0 auto;
  min-width: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 0;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.eval-rating-button:hover:not(.eval-rating-button-active) {
  border-color: var(--accent);
  color: var(--text-primary);
}

.eval-rating-button-active {
  background: var(--accent);
  color: var(--on-accent, #ffffff);
  border-color: var(--accent);
}

/* Descriptor bands — explicit hex per Standing Rule 15 */
.eval-descriptor-band {
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid #333333;
  background: #1a1a1a;
  color: #cccccc;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.eval-descriptor-band-small {
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 8px;
}

.eval-descriptor-band-tiny {
  font-size: 11px;
  padding: 2px 8px;
  margin: 0;
}

.eval-descriptor-learning   { color: #d4a017; border-color: #d4a017; }
.eval-descriptor-developing { color: #2563eb; border-color: #2563eb; }
.eval-descriptor-proficient { color: #16a34a; border-color: #16a34a; }
.eval-descriptor-mastery    { color: #facc15; border-color: #facc15; }

.eval-legacy-rating {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2a2a2a;
  color: #cccccc;
  text-transform: capitalize;
}

.sub-dimensions-collapsed { display: none; }
.sub-dimensions-expanded {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sub-dim-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-dim-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Drill recommendation chips (form + picker modal share styling) */
.drill-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 8px;
}

.drill-chips-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.drill-recommendation-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.drill-chip-remove {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.drill-chip-remove:hover { color: #f87171; }

/* Drill picker modal */
.drill-picker-modal {
  max-width: 640px;
  width: 92vw;
  max-height: calc(100vh - 40px);
  background: #111111;
  border-color: #2a2a2a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Three-zone modal body (Prompt 5a):
   tab strip (top, fixed) + active panel (scrolls) + chips/actions (bottom, fixed).
   min-height:0 on the body is required so flex children can shrink-to-scroll. */
.drill-picker-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 0;
}

/* The All Drills panel previously had its own scroll on .drill-picker-list,
   which created a nested scroll inside a scrolling panel. The panel now owns
   the scroll; this list is just a flat container. */
.drill-picker-list {
  margin-top: 10px;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
}

/* Tab strip + panels (Slice L Prompt 5a) */
.picker-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.picker-tab {
  background: transparent;
  border: none;
  color: #cccccc;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the strip border so active tab "joins" the panel */
  transition: color 120ms, border-color 120ms;
}

.picker-tab:hover {
  color: #ffffff;
}

.picker-tab-active {
  color: #ffffff;
  border-bottom-color: #2563eb;
}

.picker-tab-count {
  color: #9ca3af;
  font-weight: 500;
  margin-left: 2px;
}

.picker-tab-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px; /* room for scrollbar so content doesn't jump */
  overscroll-behavior: contain; /* Slice L Prompt 5c — stop scroll bleed to page */
}

.picker-tab-panel[hidden] {
  display: none;
}

/* ── Slice L Prompt 5c — drill picker modal mobile hotfix ────────────────
   Scoped per B2.A: other modals (.modal-backdrop, .modal-card) untouched.
   Body scroll lock prevents background scroll while modal is open.
   ID-scoped backdrop alpha bump (0.7 → 0.85) for clearer separation at
   mobile widths where the modal-card narrows. .modal-card.drill-picker-
   modal specificity boost (0,2,0) wins over the later-declared .modal-card
   (0,1,0) which had been resolving to var(--surface) — possibly translucent
   in some themes — and bleeding eval-form content through.
   --------------------------------------------------------------------- */

body.modal-open {
  overflow: hidden;
}

#drillPickerModal {
  background: rgba(0, 0, 0, 0.85);
}

.modal-card.drill-picker-modal {
  background: #111111;
}

/* ── Skill Evaluations page tabs + Existing browse view (Prompt E1) ─────── */

.page-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.page-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}

.page-tab:hover {
  color: var(--text-primary);
}

.page-tab-active {
  color: var(--text-primary);
  border-bottom-color: #2563eb;
}

.page-tab-panel[hidden] {
  display: none;
}

.existing-evals-header {
  margin-bottom: 14px;
}

.existing-evals-header h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--text-primary);
}

.existing-evals-subhead {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.existing-evals-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.existing-evals-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.existing-evals-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}

.existing-evals-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}

@media (max-width: 640px) {
  .existing-evals-filter-group {
    min-width: 100%;
  }
}

.existing-evals-loading,
.existing-evals-empty {
  margin: 8px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.existing-evals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.existing-evals-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.existing-evals-row:hover {
  background: var(--bg-elevated);
  border-color: #2a2a2a;
}

.existing-evals-row-expanded-state {
  border-color: #2563eb;
}

.existing-evals-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.existing-evals-row-skill {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.existing-evals-row-player {
  font-size: 12px;
  color: var(--text-secondary);
}

.existing-evals-row-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.existing-evals-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.existing-evals-row-chevron {
  color: var(--text-muted);
  font-size: 13px;
  min-width: 12px;
  text-align: center;
}

.existing-evals-row-obs {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.existing-evals-row-expanded {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Prompt 6b-fix Issue 1: the UA stylesheet's `[hidden] { display: none }`
 * loses the specificity tie against the class rule above (both 0,1,0; source
 * order picks the class), so collapsed rows on /player.html were rendering
 * the diagnosis/correction/sub-dim/drill-rec blocks. Targeted `[hidden]`
 * selector (0,2,0) wins. Same fix benefits /skill-evaluations.html's
 * Existing Evaluations tab transparently. */
.existing-evals-row-expanded[hidden] {
  display: none;
}

.existing-evals-row-block-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.existing-evals-row-prose {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.existing-evals-subdims-list,
.existing-evals-drills-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}

.existing-evals-subdims-list li,
.existing-evals-drills-list li {
  margin-bottom: 4px;
}

.existing-evals-drill-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Toast (Slice L Prompt 6) ──────────────────────────────────────────── */
/* Lifted from practice-planner.css pattern so any page can use showToast(). */
#toastContainer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: #1f2937;
  color: #f9fafb;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: auto;
  cursor: pointer;
  max-width: 360px;
}

.toast-success { border-left: 3px solid #16a34a; }
.toast-error   { border-left: 3px solid #dc2626; }

.toast-visible { opacity: 1; }
.toast-hiding  { opacity: 0; }

@media (max-width: 640px) {
  #toastContainer {
    left: 12px;
    right: 12px;
    bottom: 12px;
    align-items: stretch;
  }
  .toast { max-width: none; }
}

/* ── Drill action buttons (Slice L Prompt 6 → 6b-fix R1/R3 merge + T2) ─
 * Single set of styles serving both the recommendation modal rows and the
 * eval-form staging chips. Two stacked buttons per drill: Add to This Week
 * and Add to Next Week. Each becomes "Added to …" in disabled green state
 * after a successful POST /assign-drill. */

.picker-drill-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.picker-drill-actions-stacked {
  flex-direction: column;
  align-items: stretch;
  min-width: 140px;
}

.picker-drill-week-action {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #e5e5e5;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
  text-align: center;
}

.picker-drill-week-action-this {
  border-color: #2563eb;
  color: #93c5fd;
}

.picker-drill-week-action-this:hover:not(:disabled) {
  background: #2563eb;
  color: #ffffff;
}

.picker-drill-week-action-next {
  border-color: #6b7280;
  color: #d1d5db;
}

.picker-drill-week-action-next:hover:not(:disabled) {
  background: #4b5563;
  color: #ffffff;
}

.picker-drill-week-action-done {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
  cursor: not-allowed;
}

.picker-drill-week-action-done::before {
  content: '✓ ';
}

/* Staging chip layout (eval-form drillChipsList): name+remove on a top row,
 * stacked action buttons below. Each chip is its own card-ish block. */
.eval-staging-chip {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px !important;
}

.eval-staging-chip-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eval-staging-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drill-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2a2a;
  cursor: pointer;
  transition: background 120ms;
}

.drill-picker-row:last-child { border-bottom: none; }

.drill-picker-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.drill-picker-row-name {
  font-size: 13px;
  color: #ffffff;
  overflow-wrap: anywhere;
}

.drill-picker-selected-label {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888888;
}

/* History modal */
.eval-history-modal {
  max-width: 640px;
  width: 92vw;
  background: #111111;
  border-color: #2a2a2a;
  color: #ffffff;
}

.history-row {
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  background: #1a1a1a;
}

.history-row-current {
  border-color: #2563eb;
}

.history-row-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888888;
  margin-bottom: 6px;
}

.history-row-rating {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.history-row-field {
  font-size: 12px;
  color: #cccccc;
  margin-top: 4px;
}

.history-row-field-label {
  color: #888888;
}

/* Recent evaluations list (under the form) */
.recent-eval-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.recent-eval-row:last-child {
  border-bottom: none;
}

.recent-eval-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.recent-eval-row-skill {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.recent-eval-row-obs {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.recent-eval-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Disabled-state visual cue for hard-gated form fields */
textarea:disabled,
.eval-rating-button:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Drill Skill Review (Slice L Prompt 2) ──────────────────────────────── */

.review-page { /* container reuses .container + .page */ }

.review-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 13px;
}
.review-progress-label { color: var(--text-primary); font-weight: 600; }
.review-progress-counts { color: var(--text-muted); font-size: 12px; }

.review-progress-bar {
  width: 100%;
  height: 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  overflow: hidden;
}
.review-progress-fill {
  height: 100%;
  background: #16a34a;
  transition: width 200ms ease;
}

.uncovered-skill-row {
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.uncovered-skill-row:last-child { border-bottom: none; }
.uncovered-skill-name { color: var(--text-primary); font-weight: 600; }
.uncovered-skill-parent { color: var(--text-muted); }

.review-drill-card {
  margin-bottom: 16px;
}

.review-drill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}

.review-drill-positions {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-drill-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.4;
}

.review-proposals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.review-proposal-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.review-proposal-row.review-proposal-accepted { border-color: #16a34a; }
.review-proposal-row.review-proposal-edited   { border-color: #2563eb; }
.review-proposal-row.review-proposal-rejected { opacity: 0.55; }

.review-proposal-skill { min-width: 0; }
.review-proposal-skill-name { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.review-proposal-skill-parent { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.review-proposal-reasoning { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.35; }

.review-relevance-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  background: transparent;
  cursor: default;
}
.review-relevance-pill.review-relevance-primary { color: #16a34a; }
.review-relevance-pill.review-relevance-secondary { color: #d4a017; }
.review-relevance-pill-active { background: rgba(255,255,255,0.06); }

.review-proposal-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: start;
  padding: 2px 8px;
  border-radius: var(--radius);
}
.review-proposal-status-accepted { background: rgba(22,163,74,0.18); color: #16a34a; }
.review-proposal-status-edited   { background: rgba(37,99,235,0.18); color: #2563eb; }
.review-proposal-status-rejected { background: rgba(248,113,113,0.18); color: #f87171; }

.review-action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}

.review-drill-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.review-manual-tag-form {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-manual-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-manual-search-row {
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius);
  cursor: pointer;
}
.review-manual-search-row:hover { background: rgba(255,255,255,0.06); }

.review-manual-relevance-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.review-complete-state {
  text-align: center;
}

/* Drill detail panel (Slice L Prompt 2a) — expanded context for tag review.
   Two columns on desktop, single on mobile. Empty columns collapse. */
.review-drill-detail-panel {
  margin: 14px 0 18px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.review-drill-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.review-drill-detail-grid-single {
  grid-template-columns: 1fr;
}

@media (max-width: 768px) {
  .review-drill-detail-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.review-drill-detail-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.review-drill-detail-block {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.review-drill-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.review-drill-coach-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-drill-player-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.review-coach-cues-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.review-coach-cues-list li {
  margin-bottom: 2px;
}

.review-equipment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-equipment-chip {
  display: inline-block;
  padding: 2px 10px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  font-size: 12px;
  color: #cccccc;
}

.review-progression-line,
.review-duration-line,
.review-hitting-tier-line {
  display: block;
  margin-bottom: 0;
}

.review-progression-line .review-drill-detail-label,
.review-duration-line .review-drill-detail-label,
.review-hitting-tier-line .review-drill-detail-label {
  display: inline;
  margin-bottom: 0;
  margin-right: 4px;
}

/* ── Player profile drill assignment expansion (Slice L Prompt 6c) ───────
 * Wraps the existing .player-page-drill-item card with click-to-expand
 * behavior. Header (name + day pills + Remove + chevron) stays always
 * visible; the expanded body reuses the .review-drill-detail-* classes
 * above for the two-column drill detail grid and adds a prominent
 * coach_override_notes block at the top. */

.player-drill-row {
  cursor: default;
  transition: border-color 120ms;
}

.player-drill-row-expanded-state {
  border-color: #2563eb;
}

.player-drill-row-header {
  cursor: pointer;
  align-items: center;
}

.player-drill-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.player-drill-row-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.player-drill-row-chevron {
  color: #888888;
  font-size: 13px;
  min-width: 12px;
  text-align: center;
}

.player-drill-row-expanded {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Specificity fix mirrors Prompt 6b-fix Issue 1: UA `[hidden]` rule loses the
 * tie against the bare class above, so an attribute-qualified rule wins. */
.player-drill-row-expanded[hidden] {
  display: none;
}

.player-drill-coach-notes {
  background: #1e293b;
  border: 1px solid #334155;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  padding: 10px 12px;
}

.player-drill-coach-notes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #93c5fd;
  font-weight: 600;
  margin-bottom: 4px;
}

.player-drill-coach-notes-body {
  font-size: 13px;
  color: #e5e5e5;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.player-drill-day-pills {
  display: inline-flex;
  gap: 4px;
}

/* ── Re-suggest tags button (Slice L Prompt 7) ─────────────────────────── */
/* Visually subordinate to Save / primary buttons — lighter weight, signals
 * "AI action" rather than direct CRUD. Lives next to "+ Add Skill Tag" in
 * the Skill Tags card footer. */

.btn-resuggest-tags {
  background: transparent;
  border: 1px dashed #6b7280;
  color: #9ca3af;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  margin-left: 8px;
}

.btn-resuggest-tags:hover:not(:disabled) {
  border-color: #2563eb;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.08);
}

.btn-resuggest-tags:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Drill detail Skill Tags maintenance (Slice L Prompt 3) ─────────────── */

.drill-skill-tags-section .card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.drill-skill-tag-pending-section {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(212, 160, 23, 0.10);
  border: 1px solid rgba(212, 160, 23, 0.40);
  color: #d4a017;
  border-radius: var(--radius);
  font-size: 13px;
}

.drill-skill-tag-pending-section a {
  color: #d4a017;
  font-weight: 600;
}

.drill-skill-tag-empty-state {
  margin: 4px 0 12px;
  font-size: 13px;
}

.drill-skill-tag-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.drill-skill-tag-skill { min-width: 0; }
.drill-skill-tag-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.drill-skill-tag-parent {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.drill-skill-tag-actions {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
}

.drill-skill-tag-last-edited {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.drill-skill-tag-add-row {
  margin-top: 8px;
}

.drill-skill-tag-add-form {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drill-skill-tag-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drill-skill-tag-search-row {
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius);
  cursor: pointer;
}

.drill-skill-tag-search-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.drill-skill-tag-relevance-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* Coach review section in the playback modal — explicit hex per Standing Rule 15. */
.video-modal-review {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #2a2a2a;
}

.video-modal-review-title {
  margin: 0 0 10px;
  font-size: 12px;
  color: #cccccc;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.video-modal-review-byline {
  font-size: 12px;
  color: #888888;
  margin-bottom: 8px;
}

.review-textarea {
  width: 100%;
  min-height: 80px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #ffffff;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.review-textarea:focus {
  outline: none;
  border-color: #2563eb;
}

.review-char-counter {
  text-align: right;
  font-size: 11px;
  color: #888888;
  margin-top: 4px;
}

.review-char-counter.near-limit {
  color: #f87171;
}

.video-modal-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  height: 520px;
  padding: 0;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.message-bubble.role-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
}

.message-bubble.role-assistant {
  align-self: flex-start;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.message-bubble.role-system {
  align-self: center;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.message-bubble.loading {
  opacity: 0.55;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.chat-textarea {
  flex: 1;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.chat-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chat-input-row .btn {
  align-self: flex-end;
}

.plan-panel {
  margin-top: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.plan-title {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.plan-meta {
  font-size: 13px;
  color: var(--text-secondary);
}

.plan-focus-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.plan-focus-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-focus-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-primary);
}

.plan-rationale {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

.plan-blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elevated);
}

.plan-block-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.plan-block-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-block-duration {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.plan-drills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-drill-item {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-left: 3px solid var(--text-muted);
}

.plan-drill-item[data-category="catching"]    { border-left-color: #5b9bd5; }
.plan-drill-item[data-category="hitting"]     { border-left-color: #c66; }
.plan-drill-item[data-category="pitching"]    { border-left-color: #d4a017; }
.plan-drill-item[data-category="infield"]     { border-left-color: #6cb86c; }
.plan-drill-item[data-category="outfield"]    { border-left-color: #4caf9b; }
.plan-drill-item[data-category="baserunning"] { border-left-color: #b87333; }
.plan-drill-item[data-category="conditioning"]{ border-left-color: #888; }
.plan-drill-item[data-category="throwing"]    { border-left-color: #a78bfa; }

.plan-drill-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.plan-drill-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.plan-drill-duration {
  font-size: 11px;
  color: var(--text-secondary);
}

.plan-drill-notes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-style: italic;
}

.plan-save-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: right;
}

/* ── Save date modal ──────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 120ms ease;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--text-primary);
}

.modal-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.modal-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.modal-input {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Custom drill items ──────────────────────────────────────────────────── */

.plan-drill-item-custom {
  background: rgba(245, 158, 11, 0.06);
  border-left: 2px solid rgba(245, 158, 11, 0.5);
}

.plan-drill-custom-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgb(245, 158, 11);
  background: rgba(245, 158, 11, 0.12);
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 6px;
  margin-right: auto;
}

.plan-drill-custom-description {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  font-style: italic;
}

/* ── Routine items (D-1.5 Prompt 6) ─────────────────────────────────────
 * Third visual treatment alongside library (default) + custom (amber).
 * Violet/purple per architecture lock so coach can scan a plan and
 * instantly see which items reference their saved routines vs library
 * drills vs one-off custom content. Explicit hex per Standing Rule 15. */

.plan-drill-item-routine {
  background: rgba(139, 92, 246, 0.10);
  border-left: 3px solid #8b5cf6;
}

.plan-drill-routine-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.20);
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 6px;
  margin-right: auto;
}

.plan-drill-routine-description {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Radio pills (skill evaluation rating selector) ─────────────────────── */

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.radio-pill:hover {
  background-color: var(--bg-elevated);
}

.radio-pill input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.radio-pill-checked {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  font-weight: 600;
}

/* ── Skill evaluation accumulator ────────────────────────────────────────── */

.accumulator-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--bg-elevated);
}

.accumulator-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.accumulator-row-player {
  font-weight: 600;
}

.accumulator-row-skill {
  color: var(--text-secondary);
}

.accumulator-row-sep {
  color: var(--text-muted);
  font-weight: 600;
}

.accumulator-row-rating {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: #1f2937;
  color: #ffffff;
}

.accumulator-row-flag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: #b91c1c;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.accumulator-row-remove {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.accumulator-row-remove:hover {
  background: #b91c1c;
  color: #ffffff;
  border-color: #b91c1c;
}

.accumulator-row-notes {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
}

/* ── Prominent toast (skill evaluations + any high-stakes feedback) ───────── */

.toast-prominent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: toastSlideIn 0.25s ease-out;
}

.toast-prominent.alert-success {
  background-color: #15803d;
  color: #ffffff;
  border: 1px solid #166534;
}

.toast-prominent.alert-error {
  background-color: #b91c1c;
  color: #ffffff;
  border: 1px solid #991b1b;
}

.toast-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  font-weight: 700;
  opacity: 0.8;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toastSlideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Skill evaluation rows (player.html) ─────────────────────────────────── */

.eval-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--bg-elevated);
}

.eval-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.eval-row-date {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.eval-row-skill {
  color: var(--text-secondary);
}

.eval-row-sep {
  color: var(--text-muted);
  font-weight: 600;
}

.eval-row-rating {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: #1f2937;
  color: #ffffff;
}

.eval-row-flag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: #b91c1c;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eval-row-evaluator {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.eval-row-notes {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
}

/* ── Drill media (Slice N Prompt 1) ───────────────────────────────────────
 * Display-only for N-1 (upload UI lands in N-2). Image thumbnails are
 * clickable to open a full-screen enlarge modal; video and audio use
 * native HTML5 controls. Layout adapts: flat gallery when no per-step
 * media, sectioned by step when the drill has a progression. Explicit
 * hex per Standing Rule 15 on the modal which needs to read clearly
 * against any theme. */

.drill-media-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drill-media-section-drill-level,
.drill-media-section-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drill-media-section-drill-level-label,
.drill-media-section-step-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.drill-media-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.drill-media-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}

.drill-media-item-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius);
  background: #0f0f0f;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: transform 120ms, box-shadow 120ms;
}

.drill-media-item-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
}

.drill-media-item-video {
  width: 100%;
  max-width: 400px;
  max-height: 400px;
  border-radius: var(--radius);
  background: #000000;
}

/* External (YouTube) embed — Sept 1 anchor. Without this the iframe renders at
   the browser default 300x150. aspect-ratio holds 16:9 at any width, so the
   frame stays correct on a phone with no padding-top wrapper hack. Cap is wider
   than the R2 sibling above (400px) because the external video is primary
   instructional content and renders first, above the attachment gallery. */
.drill-media-external-frame {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius);
  background: #000000;
}

.drill-media-item-audio {
  width: 100%;
  max-width: 400px;
}

.drill-media-item-caption {
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 400px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.drill-media-empty,
.drill-media-loading {
  margin: 0;
}

/* Enlarge modal — full viewport overlay with the image at its natural size
 * (capped to viewport) and the caption beneath. Closes on backdrop click,
 * the X button, or Escape (wired in drill.js). */
.drill-media-enlarge-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 12px;
}

.drill-media-enlarge-modal[hidden] {
  display: none;
}

.drill-media-enlarge-modal-img {
  max-width: 95vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  background: #000000;
}

.drill-media-enlarge-modal-caption {
  color: #e5e5e5;
  font-size: 14px;
  text-align: center;
  max-width: 95vw;
  overflow-wrap: anywhere;
}

.drill-media-enlarge-modal-caption:empty {
  display: none;
}

.drill-media-enlarge-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #ffffff33;
  color: #ffffff;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
}

.drill-media-enlarge-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .drill-media-item-image {
    width: 120px;
    height: 120px;
  }
  .drill-media-enlarge-modal {
    padding: 12px;
  }
  .drill-media-enlarge-modal-img {
    max-height: 70vh;
  }
}

/* ── Drill media upload (Slice N Prompt 2) ────────────────────────────── */

.drill-media-upload-affordance {
  margin-bottom: 12px;
}

.btn-add-media {
  font-size: 13px;
}

.drill-media-upload-form {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drill-media-upload-form[hidden] {
  display: none;
}

.drill-media-upload-form-drop-zone {
  border: 2px dashed #3a3a3a;
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  background: #0f0f0f;
  transition: background 120ms, border-color 120ms;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.drill-media-upload-form-drop-zone:hover,
.drill-media-upload-form-drop-zone:focus {
  border-color: #6b7280;
  background: #1a1a1a;
  outline: none;
}

.drill-media-upload-form-drop-zone-active {
  border-color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

.drill-media-upload-form-drop-text {
  margin: 0;
  font-size: 14px;
  color: #d1d5db;
  font-weight: 500;
}

.drill-media-upload-form-drop-hint {
  margin: 0;
  font-size: 11px;
  color: #888888;
}

.drill-media-upload-form-file-info {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 8px 12px;
}

.drill-media-upload-form-file-info[hidden] {
  display: none;
}

.drill-media-upload-form-file-name {
  font-size: 13px;
  font-weight: 600;
  color: #e5e5e5;
  overflow-wrap: anywhere;
}

.drill-media-upload-form-file-meta {
  font-size: 11px;
  color: #888888;
  margin-top: 2px;
}

.drill-media-upload-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drill-media-upload-form-row label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #888888;
}

.drill-media-upload-form-step,
.drill-media-upload-form-row input[type="text"] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: #e5e5e5;
}

.drill-media-upload-form-step:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.drill-media-upload-form-hint {
  font-size: 11px;
  color: #888888;
  margin: 2px 0 0;
}

.drill-media-upload-form-progress {
  width: 100%;
  height: 8px;
  background: #1a1a1a;
  border-radius: 999px;
  overflow: hidden;
}

.drill-media-upload-form-progress[hidden] {
  display: none;
}

.drill-media-upload-form-progress-fill {
  height: 100%;
  width: 0;
  background: #2563eb;
  transition: width 200ms ease-out;
}

.drill-media-upload-form-status {
  margin: 0;
  font-size: 12px;
  color: #d1d5db;
}

.drill-media-upload-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Per-item edit / delete / drag-handle affordances (revealed on hover, but
 * always interactive — hover-to-reveal is purely visual de-clutter). */

.drill-media-item {
  position: relative;
  padding-top: 4px;
}

.drill-media-item-drag-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #6b7280;
  background: rgba(15, 15, 15, 0.85);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  cursor: grab;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 2;
}

.drill-media-item:hover .drill-media-item-drag-handle {
  opacity: 1;
}

.drill-media-item-dragging {
  opacity: 0.55;
}

.drill-media-item-caption-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 400px;
}

.drill-media-item-caption-row .drill-media-item-caption {
  flex: 1;
  min-width: 0;
}

.drill-media-item-caption-empty {
  color: #6b7280;
  font-style: italic;
}

.drill-media-item-edit,
.drill-media-item-delete {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
}

.drill-media-item:hover .drill-media-item-edit,
.drill-media-item:hover .drill-media-item-delete {
  opacity: 1;
}

.drill-media-item-edit {
  color: #93c5fd;
}

.drill-media-item-edit:hover {
  background: rgba(37, 99, 235, 0.12);
}

.drill-media-item-delete {
  color: #fca5a5;
}

.drill-media-item-delete:hover {
  background: rgba(220, 38, 38, 0.12);
}

.drill-media-item-caption-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.drill-media-item-caption-edit-input {
  flex: 1;
  min-width: 120px;
  background: #0f0f0f;
  border: 1px solid #2563eb;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #e5e5e5;
}

@media (max-width: 768px) {
  .drill-media-item-drag-handle,
  .drill-media-item-edit,
  .drill-media-item-delete {
    opacity: 1;  /* mobile has no hover — keep affordances visible */
  }
  .drill-media-upload-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* ── Library inline expansion (Slice N Prompt 3) ──────────────────────────
 * /index.html rebuilds each drill row from "click name → navigate to
 * /drill.html" to "click row → expand inline." The table structure stays
 * (preserves sticky-first-col + column headers + filter UI); each drill is
 * a `<tr class="library-drill-row">` plus an adjacent
 * `<tr class="library-drill-expanded-row">` whose `<td colspan="7">` carries
 * the two-column detail panel + shared media section. */

.library-drill-row:hover {
  background: var(--bg-elevated);
}

.library-drill-row-expanded-state {
  background: var(--bg-elevated);
}

.library-drill-name {
  font-weight: 600;
  color: var(--text-primary);
}

.library-drill-row-chevron {
  display: inline-block;
  color: #888888;
  font-size: 13px;
  margin-left: 8px;
  min-width: 12px;
  text-align: center;
}

.library-drill-row-expanded-state .library-drill-row-chevron {
  color: #2563eb;
}

.library-drill-expanded-row[hidden] {
  display: none;
}

.library-drill-expanded-cell {
  background: #0f0f0f;
  padding: 16px 18px;
  border-top: 1px solid #2a2a2a;
}

.library-drill-edit-link {
  margin-right: 4px;
}

/* ── Shared media-in-expansion wrapper (used by /index.html library,
 *    /player.html drill rows, /drill-skill-review.html drill panels) ──── */

.expansion-media-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expansion-media-section-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── Audience-specific messages (Slice I Prompt 2) ─────────────────────
 * Two new sections in the eval form (player + parent). Visually
 * distinguished from the clinical observation/diagnosis/correction
 * fields with a subtle slate panel and a dashed "AI action" Draft
 * button matching the .btn-resuggest-tags pattern from Slice L
 * Prompt 7. Preview frames mock the eventual recipient-facing
 * surface — they're placeholder framing, not the real player/parent
 * dashboard rendering (that lands in Prompt 3). */

.eval-audience-section {
  margin-top: 20px;
  padding: 14px 16px;
  background: #131822;
  border: 1px solid #2a3344;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eval-audience-section-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eval-audience-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #e5e5e5;
}

.eval-audience-section-hint {
  font-size: 12px;
  color: #93a4c0;
}

.eval-audience-section-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-draft-audience {
  background: transparent;
  border: 1px dashed #6b7280;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.btn-draft-audience:hover:not(:disabled) {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.10);
}

.btn-draft-audience:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.draft-status {
  font-size: 12px;
  color: #93a4c0;
}

.draft-status-pending {
  font-style: italic;
}

.draft-status-success {
  color: #86efac;
}

.draft-status-error {
  color: #fca5a5;
}

.eval-audience-textarea {
  background: #0f141e;
  border: 1px solid #2a3344;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  color: #e5e5e5;
  line-height: 1.45;
  resize: vertical;
  width: 100%;
  font-family: inherit;
}

.eval-audience-textarea:focus {
  outline: none;
  border-color: #2563eb;
}

.eval-audience-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.char-count {
  font-size: 11px;
  color: #6b7280;
}

.btn-link-style {
  background: transparent;
  border: none;
  color: #93c5fd;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link-style:hover {
  color: #c7d8f5;
}

.eval-audience-preview[hidden] {
  display: none;
}

.eval-audience-preview-frame {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #2a3344;
}

.eval-audience-preview-frame-player {
  background: #1a2233;
  border-color: #3b4a66;
}

.eval-audience-preview-frame-parent {
  background: #181f2b;
  border-color: #2f3a52;
}

.eval-audience-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #93a4c0;
  margin-bottom: 6px;
  font-weight: 600;
}

.eval-audience-preview-body {
  font-size: 14px;
  color: #e5e5e5;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.eval-audience-preview-body-empty {
  color: #6b7280;
  font-style: italic;
}

@media (max-width: 600px) {
  .eval-audience-section {
    padding: 12px;
  }
  .eval-audience-section-toolbar,
  .eval-audience-meta {
    flex-direction: column;
    align-items: stretch;
  }
  .draft-status {
    text-align: center;
  }
}

/* ── Drill library search/filter/sort toolbar ─────────────────────────── */
/* Sticky toolbar above the drill table. Library now uses one-shot fetch +
 * client-side filter+sort; this is the chrome for that. Builds on top of
 * the existing .drill-filters / .filter-pill base styles — new selectors
 * here add the sticky behavior, the search/sort row, active chips, and the
 * filtered-empty state. */

.drill-library-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-surface, #0f0f0f);
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1f1f1f;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.drill-library-toolbar-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.drill-library-search-input {
  flex: 1;
  min-width: 220px;
  height: 40px;
  font-size: 14px;
}

.drill-library-sort-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.drill-library-sort-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888888;
  font-weight: 600;
}

.drill-library-sort-select {
  background: #0f141e;
  border: 1px solid #2a3344;
  color: #e5e5e5;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.drill-library-sort-select:focus {
  outline: none;
  border-color: #2563eb;
}

.drill-library-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid #1f1f1f;
}

.drill-library-active-filters[hidden] {
  display: none;
}

.drill-library-active-filters-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888888;
  font-weight: 600;
}

.drill-library-active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drill-library-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid #2563eb;
  color: #c7d8f5;
  font-size: 12px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
}

.drill-library-active-filter-chip-remove {
  background: transparent;
  border: none;
  color: #c7d8f5;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 6px;
  border-radius: 999px;
  transition: background 120ms, color 120ms;
}

.drill-library-active-filter-chip-remove:hover {
  background: #2563eb;
  color: #ffffff;
}

.drill-library-clear-all-btn {
  background: transparent;
  border: 1px solid #6b7280;
  color: #d1d5db;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
}

.drill-library-clear-all-btn:hover {
  background: rgba(220, 38, 38, 0.10);
  border-color: #fca5a5;
  color: #fca5a5;
}

.drill-library-empty-state {
  padding: 32px 16px;
  text-align: center;
  color: #93a4c0;
}

@media (max-width: 768px) {
  .drill-library-toolbar-search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .drill-library-sort-control {
    justify-content: space-between;
  }
  .drill-library-sort-select {
    flex: 1;
  }
  .drill-library-clear-all-btn {
    margin-left: 0;
  }
}

/* ── Slice I Prompt 1: invitation flow surfaces ───────────────────────── */

/* Coach invite page — role toggle pills + form sections that swap. */
.invite-role-toggle {
  display: inline-flex;
  gap: 4px;
  background: #0f141e;
  border: 1px solid #2a3344;
  border-radius: 6px;
  padding: 4px;
}

.invite-role-btn {
  background: transparent;
  border: none;
  color: #c7d8f5;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.invite-role-btn:hover {
  color: #ffffff;
}

.invite-role-btn-active {
  background: #2563eb;
  color: #ffffff;
}

.invite-role-fields[hidden] {
  display: none;
}

.invite-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #1f1f1f;
}

.invite-history-row:last-child {
  border-bottom: none;
}

.invite-history-row-main {
  font-size: 13px;
  font-weight: 600;
  color: #e5e5e5;
}

.invite-history-row-meta {
  font-size: 11px;
  color: #93a4c0;
  margin-top: 2px;
}

/* Claim page — mobile-first, centered card layout, generous tap targets. */
.claim-body {
  background: #0a0e16;
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  color: #e5e5e5;
}

.claim-container {
  max-width: 480px;
  width: 100%;
  background: #131822;
  border: 1px solid #2a3344;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.claim-header {
  text-align: center;
  margin-bottom: 20px;
}

.claim-title {
  margin: 0;
  font-size: 22px;
  color: #2563eb;
  font-weight: 700;
}

.claim-subtitle {
  margin: 4px 0 0;
  color: #93a4c0;
  font-size: 14px;
}

.claim-loading,
.claim-error,
.claim-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The display:flex above beats the UA `[hidden]{display:none}` rule (author
   class > UA attribute), so without this the JS `hidden` toggles were inert and
   loading/error/form rendered simultaneously (R1 smoke, 2026-07-19). Same
   pattern as the other component [hidden] overrides in this file. */
.claim-loading[hidden],
.claim-error[hidden],
.claim-form[hidden] {
  display: none;
}

/* This standalone, unauthenticated page sets no theme tokens, so the global
   input rule's var(--bg-elevated)/--text-primary/--border resolve to nothing and
   the fields render near-invisible on the dark card. Explicit hex matching the
   page's hardcoded palette (R1 smoke, 2026-07-19). */
.claim-form input {
  background: #1a2233;
  color: #e5e5e5;
  border: 1px solid #3b4a66;
}
.claim-form input::placeholder {
  color: #6b7a95;
}
.claim-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.claim-error-title {
  margin: 0;
  color: #fca5a5;
  font-size: 18px;
}

.claim-error-body {
  margin: 0;
  font-size: 14px;
  color: #d1d5db;
  line-height: 1.5;
}

.claim-context {
  padding: 14px 16px;
  background: #1a2233;
  border: 1px solid #3b4a66;
  border-radius: 6px;
  margin-bottom: 6px;
}

.claim-context-heading {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.45;
}

.claim-context-sub {
  margin: 0;
  font-size: 13px;
  color: #93a4c0;
}

.claim-submit-btn {
  width: 100%;
  height: 48px;
  font-size: 15px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .claim-container {
    padding: 20px 16px;
  }
}

/* ── Role-aware top nav (Slice I Prompt 4) ─────────────────────────────── */
/* Default-hidden state matches the most affected role (player). Coaches and
   parents see their gated links revealed only after topnav.js applies the
   role-X body class. Prevents a flash of coach-only links for players. */

[data-role="coach"]  { display: none; }
[data-role="player"] { display: none; }
[data-role="parent"] { display: none; }

body.role-coach  [data-role="coach"]  { display: inline-flex; }
body.role-player [data-role="player"] { display: inline-flex; }
body.role-parent [data-role="parent"] { display: inline-flex; }

/* ── Coach Notes / Evaluation Cards (Slice I Prompt 3) ──────────────────── */

.eval-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eval-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.eval-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.eval-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.eval-card-score {
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.eval-card-meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.eval-card-message {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.dashboard-empty-state {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.family-child-section + .family-child-section {
  margin-top: 16px;
}

/* ── Collapse / expand child sections (Slice I Prompt 4) ───────────────── */

.child-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.child-section-header:hover {
  background: var(--bg-elevated);
}

.child-section-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.child-section-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 2px 10px;
}

.chevron-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transform: rotate(-90deg);
  transition: transform 200ms ease;
}

.child-section-expanded .chevron-icon {
  transform: rotate(0deg);
}

.child-section-body {
  overflow: hidden;
  max-height: 4000px;
  transition: max-height 220ms ease, padding 220ms ease, opacity 220ms ease;
}

.child-section-collapsed .child-section-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.child-section-collapsed .child-section-header {
  border-bottom: 0;
}

/* ── History pages (Slice I Prompt 4) ───────────────────────────────────── */

.history-page {
  padding-bottom: 80px;
}

.history-filter-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
  background: var(--bg-primary);
  padding: 12px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1 140px;
  text-transform: none;
  letter-spacing: 0;
}

.filter-field .filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.filter-field select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.history-section {
  margin-bottom: 24px;
}

.history-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}

/* Sparklines */
.sparkline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.sparkline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.sparkline-card-large {
  padding: 16px 18px;
}

.sparkline-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.sparkline {
  height: 32px;
  color: var(--text-secondary);
}

.sparkline-large {
  height: 96px;
}

.sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--text-secondary);
}

/* The latest dot was previously selected via :last-of-type circle inside
   the SVG; Slice I Prompt 6 wraps each dot in a <g> with an invisible
   hit circle, so :last-of-type no longer points at the visible latest
   dot. Use the explicit class instead. */
.sparkline-svg .sparkline-dot-latest {
  color: var(--accent);
}

.sparkline-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Sparkline tooltip (Slice I Prompt 6) ──────────────────────────────── */

.sparkline-dot-hit {
  cursor: pointer;
}

.sparkline-dot-hit:focus {
  outline: none;
}

.sparkline-dot-hit:focus .sparkline-dot-latest,
.sparkline-dot-hit:focus circle:not([fill="transparent"]) {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.sparkline-tooltip {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  z-index: 100;
  transform: translateX(-50%);
}

.sparkline-tooltip[hidden] {
  display: none;
}

/* Arrow points down toward the dot when tooltip is above; flips up when
   the tooltip is forced below the dot (near viewport top). */
.sparkline-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border);
}

.sparkline-tooltip.flip-below::after {
  bottom: auto;
  top: -6px;
  border-top-color: transparent;
  border-bottom-color: var(--border);
}

/* Table — desktop tabular, mobile card stack */
.history-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}

.history-table-head {
  display: grid;
  grid-template-columns: 140px 1fr 80px 140px;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.history-table-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px 140px;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-primary);
  align-items: center;
}

.history-table-row:last-child {
  border-bottom: 0;
}

.history-table-cell .history-table-label {
  display: none;
}

.history-table-cell .history-table-value {
  display: block;
}

/* Sortable column headers (Slice I Prompt 4.5) */
.history-table-head-cell.sortable {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-table-head-cell.sortable:hover {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.history-table-head-cell.sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.history-table-head-cell.sort-active {
  color: var(--accent);
}

.history-table-head-cell.sort-active.sort-desc::after {
  content: ' ↓';
}

.history-table-head-cell.sort-active.sort-asc::after {
  content: ' ↑';
}

/* Mobile sort segmented controls — visible only at the card-stack breakpoint */
.history-table-mobile-sort {
  display: none;
  gap: 8px;
  margin-bottom: 8px;
}

.history-mobile-sort-btn {
  flex: 1;
  min-height: 36px;
  padding: 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.history-mobile-sort-btn.is-active {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
}

.history-mobile-sort-btn.is-active.sort-desc::after {
  content: ' ↓';
}

.history-mobile-sort-btn.is-active.sort-asc::after {
  content: ' ↑';
}

@media (max-width: 600px) {
  .history-table-head {
    display: none;
  }

  .history-table-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .history-table-cell {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .history-table-cell .history-table-label {
    display: inline;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  /* Slice I Prompt 4.5 — mobile sort controls take the place of clickable
     desktop headers. */
  .history-table-mobile-sort {
    display: flex;
  }
}

/* Family history with child column on desktop */
.history-section-table .history-table-head:has(div:nth-child(5)),
.history-section-table .history-table-row:has(div:nth-child(5)) {
  grid-template-columns: 120px 140px 1fr 80px 140px;
}

@media (max-width: 600px) {
  .history-section-table .history-table-head:has(div:nth-child(5)),
  .history-section-table .history-table-row:has(div:nth-child(5)) {
    grid-template-columns: 1fr;
  }
}

/* Timeline */
.timeline-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--bg-surface);
}

.timeline-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.timeline-entry-date {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.timeline-entry-skill {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-entry-score {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--text-secondary);
}

.timeline-entry-message {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.timeline-entry-toggle {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
}

.timeline-entry-toggle:hover {
  text-decoration: underline;
}

/* ── Fault catalog (Slice I Prompt 5) ────────────────────────────────────── */

.faults-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

.faults-page-header {
  margin-bottom: 16px;
}

.faults-page-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.faults-search-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
  background: var(--bg-primary);
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

#faults-search {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 15px;
  box-sizing: border-box;
}

#faults-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.faults-search-results-count {
  color: var(--text-muted);
  font-size: 13px;
  margin: 8px 0 0 0;
}

.faults-category {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}

.faults-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  min-height: 48px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.faults-category-header:hover {
  background: var(--bg-elevated);
}

.faults-category-header h2 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.faults-category-count {
  color: var(--text-muted);
  font-size: 13px;
}

.faults-category-body {
  display: none;
  padding: 0 16px 16px;
}

.faults-category.expanded .faults-category-body {
  display: block;
}

.chevron-icon {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-secondary);
  font-size: 14px;
  width: 14px;
  flex-shrink: 0;
}

.faults-category.expanded > .faults-category-header > .chevron-icon,
.fault-pattern.expanded > .fault-pattern-header > .chevron-icon {
  transform: rotate(90deg);
}

.faults-region {
  margin-top: 14px;
}

.faults-region-header {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 12px 0 8px;
  font-weight: 600;
}

.fault-pattern {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
}

.fault-pattern-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.fault-pattern-header:hover {
  background: var(--bg-surface);
}

.fault-pattern-name {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.fault-pattern-body {
  display: none;
  padding: 4px 12px 14px;
}

.fault-pattern.expanded .fault-pattern-body {
  display: block;
}

.fault-pattern-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.fault-pattern-body h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 12px 0 8px;
  font-weight: 600;
}

.fault-pattern-corrections {
  margin: 0;
  padding-left: 22px;
}

.fault-pattern-corrections li {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 6px;
}

/* Search filter hides non-matching patterns/regions/categories */
.fault-pattern.search-hidden,
.faults-region.search-hidden,
.faults-category.search-hidden {
  display: none;
}

@media (max-width: 600px) {
  .faults-page {
    padding: 16px 12px 60px;
  }

  .faults-category-header h2 {
    font-size: 16px;
  }

  .fault-pattern-name {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .eval-card {
    padding: 12px 14px;
  }

  .eval-card-header {
    gap: 8px;
  }

  .eval-card-title {
    font-size: 14px;
  }
}

/* ── 10U Alignment Tool (2026-05-27) ─────────────────────────────────────── */

.alignment-page {
  padding-bottom: 80px;
}

.alignment-status-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.status-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.status-pill[data-status="agreed"] {
  border-color: rgba(255, 200, 0, 0.4);
}
.status-pill[data-status="locked"] {
  border-color: var(--accent);
}

.status-pill-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.status-pill-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.alignment-quick-links {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.alignment-section {
  margin-bottom: 32px;
}

.alignment-section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.alignment-section-header h2 {
  margin: 0;
  font-size: 18px;
}

.alignment-section-subtitle {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.alignment-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alignment-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.alignment-card[data-status="agreed"] {
  border-left: 3px solid rgba(255, 200, 0, 0.6);
}

.alignment-card[data-status="locked"] {
  border-left: 3px solid var(--accent);
}

.alignment-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.alignment-card-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.alignment-status-badge {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.alignment-status-draft  { color: var(--text-muted); }
.alignment-status-agreed { color: #c79600; border-color: rgba(255, 200, 0, 0.4); }
.alignment-status-locked { color: var(--accent); border-color: var(--accent); }

.alignment-field {
  margin-bottom: 10px;
}

.alignment-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.alignment-field-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.alignment-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.alignment-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.alignment-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-danger-text {
  color: #e36a6a;
}

.alignment-empty {
  margin: 0;
  font-size: 14px;
  font-style: italic;
}

/* Alignment modal (also used by decision-flow node edit) */
.alignment-modal[hidden] { display: none; }

.alignment-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.alignment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.alignment-modal-content {
  position: relative;
  max-width: 600px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.alignment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.alignment-modal-header h2 {
  margin: 0;
  font-size: 17px;
}

.alignment-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.alignment-modal-close:hover { color: var(--text-primary); }

.alignment-modal-body {
  padding: 20px;
}

.alignment-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.alignment-form-error {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(227, 106, 106, 0.12);
  border: 1px solid rgba(227, 106, 106, 0.4);
  border-radius: var(--radius);
  color: #e36a6a;
  font-size: 13px;
}

.form-required {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Coach presentation (read-only) ──────────────────────────────────────── */

.presentation-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.presentation-header {
  margin-bottom: 32px;
  text-align: center;
}

.presentation-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-primary);
}

.presentation-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.presentation-status {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
}

.presentation-section {
  margin-bottom: 40px;
}

.presentation-section-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
}

.presentation-section-intro {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.presentation-ask {
  margin-bottom: 28px;
  padding-left: 4px;
}

.presentation-ask-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.presentation-ask-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}

.presentation-ask-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.presentation-field {
  margin: 12px 0 12px 44px;
}

.presentation-field-label {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

.presentation-field-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.presentation-evidence-item {
  margin-bottom: 20px;
  padding-left: 4px;
}

.presentation-evidence-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.presentation-evidence-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.presentation-closing p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

/* Print rules — hide nav and other UI chrome; keep clean reading layout */
@media print {
  .presentation-nav-hide-print,
  .nav,
  #logoutBtn {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .presentation-page {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .presentation-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .presentation-ask,
  .presentation-evidence-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .presentation-section-title {
    color: #000;
    border-bottom-color: #000;
  }
  .presentation-ask-num {
    color: #000;
  }
  .presentation-field-value,
  .presentation-evidence-body,
  .presentation-ask-title,
  .presentation-closing p {
    color: #000;
  }
  .presentation-field-label {
    color: #555;
  }
}

/* ── Decision flow ───────────────────────────────────────────────────────── */

.decision-page {
  padding-bottom: 80px;
}

.decision-branch {
  margin-bottom: 16px;
}

.decision-children {
  margin-left: 24px;
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}

.decision-node {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.decision-node-decision { border-left: 3px solid var(--accent); }
.decision-node-action   { border-left: 3px solid #6ec07a; }
.decision-node-outcome  { border-left: 3px solid #c79600; }

.decision-node-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.decision-node-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-elevated);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.decision-node-title {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.decision-node-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.decision-node-meta {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .decision-children {
    margin-left: 12px;
    padding-left: 10px;
  }
}

/* ── Player dashboard week navigation (N3 — 2026-05-23) ──────────────────
   Badge uses explicit hex (#2563EB / #ffffff), never a theme token, per the
   contrast discipline learning: utility indicators that must remain
   contrast-safe regardless of theme switch are locked to hex values. */

.week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.week-nav-label {
  min-width: 120px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

.week-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: #2563EB;
  color: #ffffff;
}

.week-nav-badge[hidden] {
  display: none;
}

/* ── Drill day editor (N4 — 2026-05-23) ──────────────────────────────────
   Toggle states use explicit hex (#2563EB on, #16a34a locked, #444444 border
   / #c9c9c9 text off) per the contrast discipline learning. The OFF state
   relies on an always-visible border + muted text so it never resolves to
   invisible regardless of theme switch. */

.drill-day-editor {
  margin: 0 0 14px;
}

.drill-day-editor-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.day-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.day-toggle {
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #c9c9c9;
  border: 1px solid #444444;
}

.day-toggle-on {
  background: #2563EB;
  color: #ffffff;
  border-color: #2563EB;
}

.day-toggle-locked {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
  cursor: not-allowed;
  opacity: 0.85;
}

.day-editor-video-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.day-editor-actions {
  display: flex;
}

/* ── N1: Draft correction button row ─────────────────────────────────────
   Sits below the correction textarea and char counter; mirrors the audience
   draft button layout but compact since the correction has just one button. */

.draft-correction-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ── D-2 Section B: family drills card (2026-05-23) ──────────────────────
   Coach-note callout uses explicit hex (#2563EB) per the contrast discipline
   for utility callouts that must remain contrast-safe regardless of theme.
   .day-chip and .day-chip.day-done are reused from existing definitions
   above (player-side rendering); no duplication here. */

.family-drills-card {
  margin: 8px 0 16px;
}

.family-drills-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.family-drill-item {
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2a2a;
}

.family-drill-name {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}

.family-drill-detail {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.family-drill-coach-note {
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.08);
  border-left: 3px solid #2563EB;
  margin: 4px 0;
}

.family-drill-coach-note-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2563EB;
  margin: 0 0 2px;
}

.family-drill-day-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.family-drill-summary {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── N6: family dashboard sub-sections (2026-05-29) ──────────────────────
   Three independently-collapsible sub-sections per child (Drills,
   Evaluations, Announcements). Drill rows are now minimal+click-to-expand
   inside the Drills section. Evaluations carry a count+new badge and a
   Mark viewed control in their section header.

   Contrast discipline: utility indicators (badge with new, eval-new pill,
   Mark viewed button) use explicit hex, never theme tokens. */

.family-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 12px 0;
  overflow: hidden;
}

.family-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
}

.family-section-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.family-section-chevron {
  display: inline-block;
  width: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.family-section-title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.family-section-body {
  padding: 12px;
  max-height: 4000px;
  overflow: hidden;
  transition: max-height 220ms ease, padding 220ms ease, opacity 220ms ease;
}

.family-section-collapsed .family-section-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.family-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #1a1a1a;
  color: #c9c9c9;
}

.family-section-badge-has-new {
  background: #2563EB;
  color: #ffffff;
}

.family-section-badge[hidden] { display: none; }

.family-eval-mark-viewed-btn {
  margin-left: 4px;
}

.family-eval-mark-viewed-btn[hidden] { display: none; }

/* Drill row click-to-expand */

.family-drill-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  flex-wrap: wrap;
}

.family-drill-row-header:hover .family-drill-name {
  text-decoration: underline;
}

.family-drill-row-header:focus {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
  border-radius: 4px;
}

.family-drill-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.family-drill-days {
  display: inline-flex;
  gap: 4px;
}

.family-drill-summary {
  font-size: 12px;
  color: var(--text-muted);
}

.family-drill-chevron {
  display: inline-block;
  width: 14px;
  font-size: 12px;
  color: var(--text-muted);
}

.family-drill-row-body {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.family-drill-row-body[hidden] { display: none; }

.family-drill-row-body p {
  margin: 0;
}

/* Eval unread tracking */

.family-eval-check-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  cursor: pointer;
}

.family-eval-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.family-eval-new-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #2563EB;
  color: #ffffff;
  margin-left: 6px;
}

.family-evals-body {
  gap: 12px;
}

/* ── N6.5: collapsed-section summary + drill detail blocks (2026-05-29) ───
   The .family-section-summary span is rendered into every section header
   but only visible when the section is collapsed (toggled via the
   .family-section-collapsed parent class). Drill detail blocks (Coach
   description, Coach cues) use theme tokens since they are content text,
   not utility indicators requiring guaranteed-contrast hex. */

.family-section-summary {
  display: none;
  margin-left: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

.family-section-collapsed .family-section-summary {
  display: inline;
}

/* ── P6 parent mirror card: situations list ───────────────────────────────
   Per-rung mastery chips + gentle assignment flag. NO tallies (charter
   guardrail). Mastered chip mirrors .day-chip-complete (green); coming-up
   mirrors .day-chip-incomplete (muted); assigned uses the accent tone. */
.family-situations-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.family-situation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.family-situation-row:last-child {
  border-bottom: none;
}

.family-situation-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.family-situation-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.family-situation-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  user-select: none;
}

.family-situation-chip-mastered {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.40);
  color: var(--success);
}

.family-situation-chip-coming {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-muted);
}

.family-situation-chip-assigned {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

.family-drill-detail-block {
  margin-top: 10px;
}

.family-drill-detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.family-drill-detail-body {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.family-drill-coach-cues {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.family-drill-coach-cues li {
  margin-bottom: 4px;
}

/* ── N7 — eval Q&A modal (parent/player + coach variants) ───────────────── */

.eval-chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.eval-chat-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eval-chat-card-coach {
  max-width: 780px;
}

.eval-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.eval-chat-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

.eval-chat-close {
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}

.eval-chat-close:hover { background: #f3f4f6; }

.eval-chat-summary {
  padding: 12px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.eval-chat-summary-row {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

.eval-chat-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.eval-chat-tab {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #374151;
}

.eval-chat-tab-active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.eval-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
  background: #ffffff;
  min-height: 200px;
  max-height: 50vh;
}

.eval-chat-empty {
  color: #6b7280;
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.eval-chat-message {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f9fafb;
}

.eval-chat-message-sonnet {
  background: #f3f4f6;
}

.eval-chat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.eval-chat-pill-parent { background: #2563EB; }
.eval-chat-pill-player { background: #16a34a; }
.eval-chat-pill-coach  { background: #d4a017; }
.eval-chat-pill-sonnet { background: #1a1a1a; }

.eval-chat-body {
  font-size: 14px;
  color: #111827;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.eval-chat-ts {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

.eval-chat-status {
  padding: 0 20px;
  font-size: 12px;
  color: #6b7280;
  min-height: 16px;
}

.eval-chat-status-error { color: #dc2626; }

.eval-chat-form {
  display: flex;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid #e5e7eb;
}

.eval-chat-textarea {
  flex: 1 1 auto;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  line-height: 1.4;
}

.eval-chat-submit {
  background: #2563EB;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.eval-chat-submit:hover { background: #1d4ed8; }
.eval-chat-submit:disabled { background: #9ca3af; cursor: not-allowed; }

/* ── N7 — coach inbox rows ──────────────────────────────────────────────── */

.inbox-row {
  display: block;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #ffffff;
}

.inbox-row:hover { background: #f9fafb; }
.inbox-row:focus { outline: 2px solid #2563EB; outline-offset: 2px; }

.inbox-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.inbox-row-owner {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

.inbox-row-skill {
  color: #6b7280;
  font-size: 12px;
}

.inbox-row-preview {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-row-meta {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 6px;
}

/* ── N7 — notifications bell + dropdown ─────────────────────────────────── */

.notif-bell {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.notif-bell-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-bell-btn:hover { background: rgba(255,255,255,0.1); }

.notif-bell-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  min-width: 16px;
  text-align: center;
  line-height: 1.2;
}

.notif-bell-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  width: 360px;
  max-width: 90vw;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1100;
  max-height: 400px;
  overflow-y: auto;
}

.notif-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.notif-bell-head-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.notif-bell-markall {
  background: transparent;
  border: none;
  color: #2563EB;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.notif-bell-markall:hover { text-decoration: underline; }

.notif-bell-list {
  display: flex;
  flex-direction: column;
}

.notif-bell-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.notif-bell-item {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}

.notif-bell-item:last-child { border-bottom: none; }
.notif-bell-item:hover { background: #f9fafb; }

.notif-bell-item-unread { background: #eff6ff; }
.notif-bell-item-unread:hover { background: #dbeafe; }

.notif-bell-item-text {
  font-size: 13px;
  color: #111827;
  line-height: 1.4;
}

.notif-bell-item-ts {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

/* ── Active-team indicator (slice 3, 2026-08-09) ─────────────────────────────
   The nav is the canonical display of the session team — the value that
   silently scopes every coach read and write. Single-team users get
   .nav-team-name (plain text); multi-team users get .nav-team-btn opening
   .nav-team-menu. Colors mirror .nav-link so the indicator reads as part of
   the nav rather than a widget bolted onto it. */
.nav-team {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.nav-team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 8px;
}

.nav-team-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nav-team-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.nav-team-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface, #1f2937);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px;
  z-index: 60;
}

.nav-team-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary, #f3f4f6);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
}

.nav-team-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.nav-team-item:disabled {
  color: var(--text-muted, #9ca3af);
  cursor: default;
}

/* ── Assign-drill searchable picker (D2) ───────────────────────────────────── */

.drill-picker { position: relative; }

.drill-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;                    /* above sibling fields, below sticky topnav (100) */
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.drill-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
}

.drill-picker-option:hover,
.drill-picker-option.is-highlighted { background: var(--bg-elevated); }

.drill-picker-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drill-picker-empty { padding: 8px 10px; font-size: 13px; color: var(--text-muted); }

.drill-picker-selection {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
}

.drill-picker-selection-label { color: var(--text-muted); }
.drill-picker-selection-name  { font-weight: 600; color: var(--text-primary); }

.drill-picker-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.drill-picker-clear:hover { color: var(--error); }

/* ── Collapsible assignment cards, kid surface (D3) ────────────────────────── */

/* .card-header is already flex + space-between with 16px/20px padding, so it is
   already a phone-sized tap target; this only adds the affordances. */
.assignment-card-header {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.assignment-card-header:hover .card-title { text-decoration: underline; }

.assignment-card-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.assignment-card-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.assignment-card-summary { font-size: 12px; color: var(--text-muted); }

.assignment-card-chevron {
  display: inline-block;
  width: 14px;
  font-size: 12px;
  color: var(--text-muted);
}