/**
 * Track record — Dawn Vedic.
 *
 * Band classes are tr-band-*: the shared is-good / is-excellent vocabulary is
 * force-recoloured with !important by cosmic-ref-theme.css whenever it lands on
 * an element whose class also contains score / badge / pill / day / cell.
 */

.track-record-page .tr-lead {
  max-width: 66ch;
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.track-record-page .tr-section-title {
  margin: 34px 0 6px;
}

.track-record-page .tr-subtitle {
  margin: 26px 0 8px;
  color: var(--text-primary);
  font-size: 1.0625rem;
}

.track-record-page .tr-section-note {
  margin: 0 0 18px;
  max-width: 74ch;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.65;
}

.track-record-page .tr-feedback {
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

.track-record-page .tr-feedback.tr-is-error { color: var(--danger); }

/* --------------------------------------------------------------- pending -- */

.track-record-page .tr-pending {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.track-record-page .tr-pending__item {
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-saffron);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.track-record-page .tr-pending__question {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: var(--fs-body-lg);
  line-height: 1.45;
}

.track-record-page .tr-pending__meta {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.track-record-page .tr-pending__answers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.track-record-page .tr-unsure {
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.track-record-page .tr-unsure:hover { color: var(--text-secondary); }

/* -------------------------------------------------------------- headline -- */

.track-record-page .tr-headline {
  padding: 24px 26px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card-alt);
}

.track-record-page .tr-band-good { border-left-color: var(--success); }
.track-record-page .tr-band-mixed { border-left-color: var(--accent-saffron); }
.track-record-page .tr-band-poor { border-left-color: var(--danger); }

.track-record-page .tr-headline__figure {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1.05;
}

.track-record-page .tr-headline__figure span {
  margin-left: 10px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.track-record-page .tr-headline__verdict {
  margin: 4px 0 14px;
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
}

.track-record-page .tr-headline__sub {
  margin: 8px 0 0;
  max-width: 60ch;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.track-record-page .tr-headline__facts {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.75;
}

.track-record-page .tr-warnings {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px dashed var(--warning);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
}

.track-record-page .tr-warnings ul {
  margin: 0;
  padding-left: 18px;
  max-width: 76ch;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.7;
}

/* ----------------------------------------------------------- calibration -- */

.track-record-page .tr-calibration {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  padding: 16px 18px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow-x: auto;
}

.track-record-page .tr-cal {
  display: flex;
  flex: 1 0 66px;
  flex-direction: column;
  align-items: center;
}

/* The bar is what actually happened; the marker is what we claimed. Reading one
   against the other is the whole point of the chart. */
.track-record-page .tr-cal__plot {
  position: relative;
  display: flex;
  width: 100%;
  height: 150px;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--bg-sunken), var(--bg-sunken)) no-repeat;
  background-size: 100% 1px;
  background-position: 0 50%;
}

.track-record-page .tr-cal__actual {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--accent-teal);
}

.track-record-page .tr-cal__none {
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px);
}

.track-record-page .tr-cal__claimed {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 2px;
  background: var(--accent-maroon);
}

.track-record-page .tr-cal__claimed::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-maroon);
}

.track-record-page .tr-cal__label {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.track-record-page .tr-cal__count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.track-record-page .tr-empty-note {
  margin: 0;
  padding: 16px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

/* ----------------------------------------------------------------- table -- */

.track-record-page .tr-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.track-record-page .tr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}

.track-record-page .tr-table th,
.track-record-page .tr-table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

/* No background: monochrome-theme.css strips th backgrounds with !important as
   part of that theme, so a heavier rule carries the header row instead. */
.track-record-page .tr-table thead th {
  border-bottom: 2px solid var(--border-strong);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.track-record-page .tr-table tbody th {
  max-width: 46ch;
  color: var(--text-primary);
  font-weight: 500;
}

.track-record-page .tr-table td {
  color: var(--text-secondary);
  white-space: nowrap;
}

.track-record-page .tr-outcome-yes { color: var(--success); }
.track-record-page .tr-outcome-no { color: var(--danger); }
.track-record-page .tr-outcome-unclear { color: var(--text-muted); }
.track-record-page .tr-outcome-open { color: var(--warning); }

.track-record-page .tr-method {
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card-alt);
}

.track-record-page .tr-method ul {
  margin: 0;
  padding-left: 18px;
  max-width: 78ch;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.75;
}

.track-record-page .tr-method li + li { margin-top: 8px; }

.track-record-page .tr-state {
  padding: 32px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card-alt);
  text-align: center;
}

.track-record-page .tr-state p {
  max-width: 56ch;
  margin: 8px auto 20px;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .track-record-page .tr-headline__figure { font-size: 2.25rem; }
  .track-record-page .tr-cal { flex-basis: 56px; }
}

/* Per-kind scores. Skill only means something against the base rate of the set
   it came from, so kinds are never pooled into one number here. */
.track-record-page .tr-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.track-record-page .tr-kind {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.track-record-page .tr-kind__name {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-weight: 600;
}

.track-record-page .tr-kind__figure {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.track-record-page .tr-kind__meta {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.6;
}