/* Pair Training — custom styles */

.heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.heading em { font-style: italic; }

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6B7280;
  transition: color 150ms;
}
.nav-link:hover, .nav-link-active {
  color: #1e3a5f;
}

.card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(30,58,95,0.04), 0 4px 8px rgba(30,58,95,0.06);
}

#selector-card {
  overflow: visible;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: transform 150ms, opacity 150ms;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: 0.9; }
.btn-primary { background: #1e3a5f; color: white; }
.btn-gold { background: #c9a84c; color: white; }
.btn-outline { border: 1.5px solid #E5E7EB; color: #1e3a5f; }
.btn-outline:hover { border-color: #1e3a5f; }

.stat-card { border-left: 3px solid; }

.pct-good { color: #16a34a; }
.pct-avg { color: #c9a84c; }
.pct-bad { color: #dc2626; }

/* Suit symbols — inline colored */
.suit-s::before { content: '\2660'; color: #1e3a5f; }
.suit-h::before { content: '\2665'; color: #dc2626; }
.suit-d::before { content: '\2666'; color: #ea580c; }
.suit-c::before { content: '\2663'; color: #16a34a; }

/* Vulnerability colors */
.vuln-none { color: #16a34a; }
.vuln-ns { color: #dc2626; }
.vuln-eo { color: #dc2626; }
.vuln-all { color: #dc2626; }
.vuln-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}
.vuln-badge-none { background: #dcfce7; color: #16a34a; }
.vuln-badge-partial { background: #fef3c7; color: #b45309; }
.vuln-badge-all { background: #fee2e2; color: #dc2626; }

/* Board diagram — CSS grid with proper alignment */
.board-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0.5rem;
  max-width: 480px;
  font-size: 0.8125rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.board-north { grid-column: 2; grid-row: 1; }
.board-west  { grid-column: 1; grid-row: 2; display: flex; justify-content: flex-end; }
.board-center { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; }
.board-east  { grid-column: 3; grid-row: 2; }
.board-south { grid-column: 2; grid-row: 3; }

/* Hand display — table layout for perfect vertical alignment */
.hand-table {
  border-collapse: collapse;
}
.hand-table td {
  padding: 0;
  line-height: 1.4;
  white-space: nowrap;
}
.hand-table .hand-suit {
  width: 1.25rem;
  text-align: center;
  padding-right: 0.25rem;
}
.hand-table .hand-cards {
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Player label in diagram */
.player-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 0.125rem;
  white-space: nowrap;
}
.player-label-muted {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9CA3AF;
  margin-bottom: 0.125rem;
}

/* Contract result in diagram center */
.diagram-result {
  text-align: center;
  line-height: 1.3;
}

/* Editor */
.system-editor {
  min-height: 400px;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  padding: 1.5rem;
  outline: none;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.system-editor:focus {
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30,58,95,0.1);
}
.system-editor h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: #182e4c; }
.system-editor h3 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.25rem; color: #3d609d; }
.system-editor ul { padding-left: 1.5rem; list-style: disc; }
.system-editor li { margin: 0.25rem 0; }

/* Section nav for system */
.section-nav a {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: #6B7280;
  border-left: 2px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.section-nav a:hover, .section-nav a.active {
  color: #1e3a5f;
  border-left-color: #c9a84c;
}