/*
 * training-report.css
 * BEM prefix: fc-tr__
 * FelixChess design system: #0a0c0a background · #aaff00 lime accent
 * FelixChess app typography: Lato, sans-serif, system-ui
 * Sprint 1: full styles for shell, form, pipeline, statistics
 */

/* ── Reset & custom properties ── */

.fc-tr,
.fc-tr *,
.fc-tr *::before,
.fc-tr *::after,
.fc-tr__gate,
.fc-tr__gate *,
.fc-tr__gate *::before,
.fc-tr__gate *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Re-export FelixChess design tokens as local vars for isolation */
.fc-tr, .fc-tr__gate {
  --cr-bg:          #0a0c0a;
  --cr-surface:     #141714;
  --cr-surface-2:   #1c1f1c;
  --cr-surface-3:   #242824;
  --cr-border:      #2a2e2a;
  --cr-border-2:    #3a3e3a;
  --cr-accent:      #aaff00;
  --cr-accent-dim:  #7abf00;
  --cr-text:        #e8ebe8;
  --cr-text-muted:  #8a9a8a;
  --cr-text-faint:  #5a6a5a;
  --cr-red:         #ff4444;
  --cr-amber:       #ffaa00;
  --cr-green:       #44cc44;
  --cr-blue:        #4488ff;
  --cr-font-head:   Lato, sans-serif, system-ui;
  --cr-font-body:   Lato, sans-serif, system-ui;
  --cr-font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --cr-radius:      6px;
  --cr-radius-lg:   12px;
  --cr-shadow:      0 2px 12px rgba(0,0,0,0.4);
  --cr-max-width:   900px;
  --cr-transition:  200ms ease;
}

/* ── Gate (WS / UA) ── */

.fc-tr__gate {
  background: var(--cr-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  font-family: var(--cr-font-body);
  color: var(--cr-text);
}

.fc-tr__gate-card {
  max-width: 520px;
  width: 100%;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-lg);
  padding: 2.5rem;
  text-align: center;
}

.fc-tr__gate-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.fc-tr__gate-title {
  font-family: var(--cr-font-head);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--cr-text);
  margin-bottom: 0.75rem;
}

.fc-tr__gate-subtitle {
  color: var(--cr-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.fc-tr__gate-features {
  list-style: none;
  text-align: left;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fc-tr__gate-features li {
  font-size: 0.9rem;
  color: var(--cr-text-muted);
  padding-left: 1.25rem;
  position: relative;
}

.fc-tr__gate-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cr-accent);
  font-weight: 700;
}

.fc-tr__gate-cta {
  display: inline-block;
  background: var(--cr-accent);
  color: #0a0c0a;
  font-family: var(--cr-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.8rem 1.75rem;
  border-radius: var(--cr-radius);
  text-decoration: none;
  transition: background var(--cr-transition);
  margin-bottom: 1rem;
}

.fc-tr__gate-cta:hover {
  background: var(--cr-accent-dim);
}

.fc-tr__gate-note {
  font-size: 0.8rem;
  color: var(--cr-text-faint);
}

/* ── Main tool wrapper ── */

.fc-tr {
  background: var(--cr-bg);
  min-height: 100vh;
  font-family: var(--cr-font-body);
  color: var(--cr-text);
}

/* ── Page header ── */

.fc-tr__header {
  border-bottom: 1px solid var(--cr-border);
  padding: 2.5rem 1.5rem 2rem;
}

.fc-tr__header-inner {
  max-width: var(--cr-max-width);
  margin: 0 auto;
}

.fc-tr__title {
  font-family: var(--cr-font-head);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--cr-text);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.fc-tr__beta {
  font-family: var(--cr-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-accent);
  background: rgba(170,255,0,0.12);
  border: 1px solid rgba(170,255,0,0.3);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  vertical-align: middle;
}

.fc-tr__subtitle {
  color: var(--cr-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* ── Input section ── */

.fc-tr__input-section {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid var(--cr-border);
}

.fc-tr__form {
  max-width: var(--cr-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fc-tr__field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fc-tr__field-group--action {
  padding-top: 0.5rem;
}

.fc-tr__form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.fc-tr__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cr-text-muted);
}

.fc-tr__input {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  color: var(--cr-text);
  font-family: var(--cr-font-body);
  font-size: 1rem;
  padding: 0.6rem 0.875rem;
  transition: border-color var(--cr-transition);
  width: 100%;
  max-width: 360px;
}

.fc-tr__input:focus {
  outline: none;
  border-color: var(--cr-accent);
}

.fc-tr__input--date {
  max-width: 160px;
  color-scheme: dark;
}

.fc-tr__input-hint {
  font-size: 0.8rem;
  color: var(--cr-text-faint);
}

/* Platform toggle */

.fc-tr__platform-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  overflow: hidden;
  width: fit-content;
}

.fc-tr__platform-btn {
  background: transparent;
  border: none;
  color: var(--cr-text-muted);
  cursor: pointer;
  font-family: var(--cr-font-body);
  font-size: 0.9rem;
  padding: 0.55rem 1.25rem;
  transition: background var(--cr-transition), color var(--cr-transition);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fc-tr__platform-btn + .fc-tr__platform-btn {
  border-left: 1px solid var(--cr-border);
}

.fc-tr__platform-btn--active {
  background: var(--cr-surface-2);
  color: var(--cr-accent);
  font-weight: 600;
}

.fc-tr__platform-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fc-tr__coming-soon {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--cr-surface-3);
  color: var(--cr-text-faint);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
}

/* Select */

.fc-tr__select {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  color: var(--cr-text);
  font-family: var(--cr-font-body);
  font-size: 0.9rem;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
  appearance: none;
  -webkit-appearance: none;
  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='%238a9a8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  cursor: pointer;
  transition: border-color var(--cr-transition);
}

.fc-tr__select:focus {
  outline: none;
  border-color: var(--cr-accent);
}

/* Radio group */

.fc-tr__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fc-tr__radio-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--cr-text);
}

.fc-tr__radio {
  accent-color: var(--cr-accent);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.fc-tr__date-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fc-tr__date-sep {
  color: var(--cr-text-faint);
  font-size: 0.85rem;
}

/* Analyze button */

.fc-tr__analyze-btn {
  background: var(--cr-accent);
  border: none;
  border-radius: var(--cr-radius);
  color: #0a0c0a;
  cursor: pointer;
  font-family: var(--cr-font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.8rem 2rem;
  transition: background var(--cr-transition), opacity var(--cr-transition);
  width: fit-content;
}

.fc-tr__form-actions .fc-tr__analyze-btn,
.fc-tr__form-actions .fc-tr__reset-btn {
  min-width: 220px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  width: auto;
}

.fc-tr__analyze-btn:hover:not(:disabled) {
  background: var(--cr-accent-dim);
}

.fc-tr__analyze-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fc-tr__analyze-btn--loading {
  opacity: 0.6;
  cursor: wait;
}

.fc-tr__error-msg {
  color: var(--cr-red);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.fc-tr__error-msg[hidden] { display: none; }

/* ── Pipeline ── */

.fc-tr__pipeline {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid var(--cr-border);
}

.fc-tr__pipeline[hidden] { display: none; }

.fc-tr__pipeline-inner {
  max-width: var(--cr-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fc-tr__pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.95rem;
  color: var(--cr-text-faint);
  transition: color var(--cr-transition);
}

.fc-tr__pipeline-step--active {
  color: var(--cr-text);
}

.fc-tr__pipeline-step--done {
  color: var(--cr-text-muted);
}

.fc-tr__pipeline-step--error {
  color: var(--cr-red);
}

.fc-tr__step-icon {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

.fc-tr__step-icon--done::before { content: '✓'; color: var(--cr-accent); }
.fc-tr__step-icon--active::before { content: ''; }
.fc-tr__step-icon--error::before { content: '✗'; color: var(--cr-red); }
.fc-tr__step-icon--pending::before { content: '○'; }

/* Spinner for active step */
.fc-tr__pipeline-step--active .fc-tr__step-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(170,255,0,0.25);
  border-top-color: var(--cr-accent);
  border-radius: 50%;
  animation: fc-tr-spin 0.7s linear infinite;
  margin-top: 2px;
}

@keyframes fc-tr-spin {
  to { transform: rotate(360deg); }
}

.fc-tr__step-label {
  flex: 1;
  line-height: 1.4;
}

/* Progress bar */

.fc-tr__progress-bar {
  width: 100%;
  max-width: 480px;
  height: 6px;
  background: var(--cr-surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
  position: relative;
}

.fc-tr__progress-bar[hidden] { display: none; }

.fc-tr__progress-fill {
  height: 100%;
  background: var(--cr-accent);
  border-radius: 3px;
  width: 0%;
  transition: width 300ms ease;
}

.fc-tr__progress-text {
  position: absolute;
  right: 0;
  top: -1.4rem;
  font-size: 0.75rem;
  color: var(--cr-text-faint);
}

.fc-tr__pipeline-error {
  color: var(--cr-red);
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

.fc-tr__pipeline-error[hidden] { display: none; }

/* ── Report ── */

.fc-tr__report {
  max-width: var(--cr-max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.fc-tr__report[hidden] { display: none; }

/* PDF bar */

.fc-tr__pdf-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  margin-bottom: 1.5rem;
}

.fc-tr__pdf-bar[hidden] { display: none; }

.fc-tr__pdf-btn {
  background: transparent;
  border: 1px solid var(--cr-accent);
  border-radius: var(--cr-radius);
  color: var(--cr-accent);
  cursor: pointer;
  font-family: var(--cr-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  transition: background var(--cr-transition);
  white-space: nowrap;
}

.fc-tr__pdf-btn:hover {
  background: rgba(170,255,0,0.08);
}

.fc-tr__pdf-hint {
  font-size: 0.8rem;
  color: var(--cr-text-faint);
}

/* Report meta */

.fc-tr__report-meta {
  font-size: 0.85rem;
  color: var(--cr-text-muted);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cr-border);
}

/* Section titles */

.fc-tr__section-title {
  font-family: var(--cr-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cr-text);
  margin-bottom: 1.25rem;
}

/* ── Executive Summary ── */

.fc-tr__summary-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cr-border);
}

.fc-tr__summary-section[hidden] { display: none; }

.fc-tr__summary-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--cr-text);
}

.fc-tr__summary-body p + p {
  margin-top: 1em;
}

.fc-tr__summary-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cr-text-muted);
  font-size: 0.9rem;
}

/* ── Statistics ── */

.fc-tr__stats-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cr-border);
}

.fc-tr__stats-section[hidden] { display: none; }

.fc-tr__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .fc-tr__stats-grid { grid-template-columns: 1fr; }
}

.fc-tr__stat-card {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-lg);
  padding: 1.25rem;
}

.fc-tr__stat-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-text-muted);
  margin-bottom: 1rem;
}

/* Results table */

.fc-tr__results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fc-tr__results-table th,
.fc-tr__results-table td {
  padding: 0.45rem 0.6rem;
  text-align: right;
}

.fc-tr__results-table th:first-child,
.fc-tr__results-table td:first-child {
  text-align: left;
  color: var(--cr-text-muted);
  font-weight: 600;
}

.fc-tr__results-table th {
  color: var(--cr-text-faint);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cr-border);
  padding-bottom: 0.6rem;
}

.fc-tr__results-table td {
  color: var(--cr-text);
  border-bottom: 1px solid var(--cr-border);
}

.fc-tr__results-table tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  color: var(--cr-text);
}

.fc-tr__results-table .fc-tr__win  { color: var(--cr-green); }
.fc-tr__results-table .fc-tr__loss { color: var(--cr-red); }
.fc-tr__results-table .fc-tr__draw { color: var(--cr-text-muted); }

/* ELO list */

.fc-tr__elo-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.9rem;
}

.fc-tr__elo-list dt {
  font-size: 0.78rem;
  color: var(--cr-text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.fc-tr__elo-list dd {
  color: var(--cr-text);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Rating chart */

.fc-tr__chart-card {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-lg);
  padding: 1.25rem;
}

.fc-tr__chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.fc-tr__chart-card-header .fc-tr__stat-card-title {
  margin-bottom: 0;
}

.fc-tr__rating-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--cr-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.fc-tr__rating-filter-btn {
  min-width: 3.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--cr-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.42rem 0.75rem;
  transition:
    background var(--cr-transition),
    border-color var(--cr-transition),
    color var(--cr-transition);
}

.fc-tr__rating-filter-btn:hover {
  border-color: rgba(170, 255, 0, 0.32);
  color: var(--cr-text);
}

.fc-tr__rating-filter-btn:focus-visible {
  outline: 2px solid rgba(170, 255, 0, 0.6);
  outline-offset: 2px;
}

.fc-tr__rating-filter-btn--active,
.fc-tr__rating-filter-btn[aria-pressed="true"] {
  background: rgba(170, 255, 0, 0.1);
  border-color: rgba(170, 255, 0, 0.55);
  color: var(--cr-accent);
}

.fc-tr__chart-container {
  width: 100%;
  height: 200px;
  position: relative;
}

.fc-tr__chart-container svg {
  width: 100%;
  height: 100%;
}

.fc-tr__chart-empty {
  align-items: center;
  border: 1px dashed var(--cr-border);
  border-radius: var(--cr-radius);
  color: var(--cr-text-muted);
  display: flex;
  font-size: 0.9rem;
  height: 100%;
  justify-content: center;
  line-height: 1.5;
  padding: 1rem;
  text-align: center;
}

.fc-tr__chart-caption {
  color: var(--cr-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.85rem 0 0;
}

@media (max-width: 520px) {
  .fc-tr__chart-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .fc-tr__rating-filter {
    width: 100%;
  }

  .fc-tr__rating-filter-btn {
    flex: 1 1 0;
  }
}

/* D3 chart elements */
.fc-tr__chart-line {
  fill: none;
  stroke: var(--cr-accent);
  stroke-width: 1.5;
  opacity: 0.7;
}
.fc-tr__chart-dot-win  { fill: #44cc44; }
.fc-tr__chart-dot-loss { fill: #ff4444; }
.fc-tr__chart-dot-draw { fill: #666666; }
.fc-tr__chart-axis { stroke: var(--cr-border-2); }
.fc-tr__chart-grid  { stroke: var(--cr-border); stroke-dasharray: 3,3; }
.fc-tr__chart-text  { fill: var(--cr-text-faint); font-family: var(--cr-font-body); font-size: 11px; }
.fc-tr__chart-tooltip {
  position: absolute;
  background: var(--cr-surface-3);
  border: 1px solid var(--cr-border-2);
  border-radius: var(--cr-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: var(--cr-text);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms ease;
}

/* ── Pattern analysis ── */

.fc-tr__patterns-section {
  margin-bottom: 2rem;
}

.fc-tr__patterns-section[hidden] { display: none; }

.fc-tr__patterns-intro {
  font-size: 0.9rem;
  color: var(--cr-text-muted);
  margin-bottom: 1.25rem;
}

.fc-tr__patterns-empty {
  color: var(--cr-text-muted);
  font-style: italic;
  font-size: 0.95rem;
}

.fc-tr__patterns-empty[hidden] { display: none; }

/* Accordion */

.fc-tr__accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fc-tr__accordion-panel {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  overflow: hidden;
}

.fc-tr__accordion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--cr-transition);
}

.fc-tr__accordion-header:hover {
  background: var(--cr-surface-2);
}

.fc-tr__accordion-chevron {
  color: var(--cr-text-faint);
  font-size: 0.7rem;
  transition: transform var(--cr-transition);
  flex-shrink: 0;
  margin-right: 0.1rem;
}

.fc-tr__accordion-panel--open .fc-tr__accordion-chevron {
  transform: rotate(90deg);
}

.fc-tr__accordion-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cr-text);
  flex: 1;
}

.fc-tr__accordion-count {
  font-size: 0.82rem;
  color: var(--cr-text-muted);
}

/* Severity badges */

.fc-tr__severity {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  flex-shrink: 0;
}

.fc-tr__severity--HIGH   { background: rgba(255,68,68,0.15);  color: #ff6666; border: 1px solid rgba(255,68,68,0.3); }
.fc-tr__severity--MEDIUM { background: rgba(255,170,0,0.12);  color: #ffbb33; border: 1px solid rgba(255,170,0,0.3); }
.fc-tr__severity--LOW    { background: rgba(100,100,100,0.12); color: #888888; border: 1px solid rgba(100,100,100,0.3); }

/* Accordion body */

.fc-tr__accordion-body {
  border-top: 1px solid var(--cr-border);
  display: none;
}

.fc-tr__accordion-panel--open .fc-tr__accordion-body {
  display: block;
}

/* Occurrence entries */

.fc-tr__occurrence-list {
  list-style: none;
  padding: 0;
}

.fc-tr__occurrence {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--cr-border);
  font-size: 0.875rem;
}

.fc-tr__occurrence:last-child {
  border-bottom: none;
}

.fc-tr__occurrence-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.fc-tr__occurrence-date {
  color: var(--cr-text-muted);
  font-size: 0.78rem;
}

.fc-tr__occurrence-players {
  font-weight: 600;
  color: var(--cr-text);
}

.fc-tr__occurrence-result {
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 700;
}

.fc-tr__occurrence-result--win  { background: rgba(68,204,68,0.12); color: var(--cr-green); }
.fc-tr__occurrence-result--loss { background: rgba(255,68,68,0.12);  color: var(--cr-red); }
.fc-tr__occurrence-result--draw { background: rgba(100,100,100,0.1); color: var(--cr-text-muted); }

.fc-tr__occurrence-move {
  color: var(--cr-accent);
  font-size: 0.78rem;
  font-family: var(--cr-font-mono);
}

.fc-tr__occurrence-desc {
  color: var(--cr-text-muted);
  line-height: 1.5;
}

.fc-tr__occurrence-eval {
  font-size: 0.75rem;
  color: var(--cr-text-faint);
}

.fc-tr__occurrence-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--cr-accent-dim);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color var(--cr-transition);
}

.fc-tr__occurrence-link:hover {
  color: var(--cr-accent);
}

/* Spinner (inline) */

.fc-tr__spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(170,255,0,0.2);
  border-top-color: var(--cr-accent);
  border-radius: 50%;
  animation: fc-tr-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Print styles ── */

.fc-tr__print-header {
  display: none;
}

@media print {

  .fc-tr__print-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--cr-font-body);
    font-size: 10px;
    color: #555;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1.5rem;
  }

  .fc-tr__header,
  .fc-tr__input-section,
  .fc-tr__pipeline,
  .fc-tr__pdf-bar,
  .fc-tr__gate { display: none !important; }

  .fc-tr, .fc-tr__report {
    background: white;
    color: #111;
    max-width: 100%;
    padding: 0;
  }

  .fc-tr__report[hidden] { display: block !important; }

  .fc-tr__section-title {
    color: #111;
    font-size: 1.25rem;
  }

  .fc-tr__stat-card,
  .fc-tr__chart-card {
    background: white;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .fc-tr__accordion-body { display: block !important; }

  .fc-tr__accordion-panel {
    background: white;
    border: 1px solid #ccc;
    break-inside: avoid;
    margin-bottom: 0.5rem;
  }

  .fc-tr__occurrence-link::after {
    content: ' (' attr(href) ')';
    font-size: 0.65rem;
    color: #888;
  }

  .fc-tr__severity--HIGH   { background: #ffeaea; color: #cc0000; border-color: #ffcccc; }
  .fc-tr__severity--MEDIUM { background: #fff4e0; color: #cc7700; border-color: #ffe0aa; }
  .fc-tr__severity--LOW    { background: #f0f0f0; color: #555555; border-color: #cccccc; }

  .fc-tr__summary-section,
  .fc-tr__stats-section,
  .fc-tr__patterns-section {
    break-before: avoid;
  }
}

/* ── Utility ── */

[hidden] { display: none !important; }

/* ── Aggregate banner (MISSED_THREAT) ── */

.fc-tr__aggregate-banner {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-left: 3px solid var(--cr-text-faint);
  border-radius: var(--cr-radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.fc-tr__aggregate-banner--high {
  border-left-color: var(--cr-red);
  background: rgba(255,68,68,0.04);
}

.fc-tr__aggregate-banner--medium {
  border-left-color: var(--cr-amber);
  background: rgba(255,170,0,0.04);
}

.fc-tr__aggregate-banner--low {
  border-left-color: var(--cr-text-faint);
}

.fc-tr__aggregate-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.fc-tr__aggregate-rate {
  font-size: 0.82rem;
  color: var(--cr-text-muted);
  margin-left: auto;
}

.fc-tr__aggregate-note {
  font-size: 0.875rem;
  color: var(--cr-text-muted);
  line-height: 1.6;
}

/* ── View tabs (By Pattern / By Game) ── */

.fc-tr__tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  overflow: hidden;
  width: fit-content;
  margin-bottom: 1rem;
}

.fc-tr__tab-btn {
  background: transparent;
  border: none;
  color: var(--cr-text-muted);
  cursor: pointer;
  font-family: var(--cr-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  transition: background var(--cr-transition), color var(--cr-transition);
}

.fc-tr__tab-btn + .fc-tr__tab-btn {
  border-left: 1px solid var(--cr-border);
}

.fc-tr__tab-btn--active {
  background: var(--cr-surface-2);
  color: var(--cr-accent);
  font-weight: 700;
}

.fc-tr__tab-btn:hover:not(.fc-tr__tab-btn--active) {
  background: var(--cr-surface);
  color: var(--cr-text);
}

/* ── Filter bar ── */

.fc-tr__filters {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.875rem;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
}

.fc-tr__filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fc-tr__filter-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cr-text-faint);
  white-space: nowrap;
}

.fc-tr__select--sm {
  padding: 0.3rem 1.75rem 0.3rem 0.6rem;
  font-size: 0.82rem;
}

/* ── Game list (shared by By Pattern and By Game views) ── */

.fc-tr__game-list {
  list-style: none;
  padding: 0;
}

.fc-tr__game-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--cr-border);
  font-size: 0.875rem;
}

.fc-tr__game-row:last-child {
  border-bottom: none;
}

.fc-tr__game-row--link {
  padding: 0.5rem 1.1rem;
}

.fc-tr__game-row-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.fc-tr__game-row-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cr-accent-dim);
  font-family: var(--cr-font-mono);
  margin-left: auto;
}

/* ── Show more toggle ── */

.fc-tr__show-more {
  list-style: none;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--cr-border);
}

.fc-tr__show-more-btn {
  background: none;
  border: none;
  color: var(--cr-text-faint);
  cursor: pointer;
  font-family: var(--cr-font-body);
  font-size: 0.8rem;
  padding: 0;
  transition: color var(--cr-transition);
}

.fc-tr__show-more-btn:hover {
  color: var(--cr-accent);
}

/* ── Print: expand all, show game rows ── */

@media print {
  .fc-tr__tabs,
  .fc-tr__filters,
  .fc-tr__show-more { display: none !important; }

  .fc-tr__game-row { break-inside: avoid; }
}

/* ── Reset button ── */

.fc-tr__reset-btn {
  background: transparent;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  color: var(--cr-text-muted);
  cursor: pointer;
  font-family: var(--cr-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  transition: border-color var(--cr-transition), color var(--cr-transition);
  white-space: nowrap;
}

.fc-tr__reset-btn[hidden] {
  display: none;
}

.fc-tr__reset-btn:hover {
  border-color: var(--cr-accent);
  color: var(--cr-accent);
}

@media print {
  .fc-tr__reset-btn { display: none !important; }
}

@media (max-width: 640px) {
  .fc-tr__form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fc-tr__form-actions .fc-tr__analyze-btn,
  .fc-tr__form-actions .fc-tr__reset-btn {
    width: 100%;
  }
}