/*
 * session-detail.css — page-specific styles for session-detail.html
 * (SPEC.md §7.4, lines 987-1023). Layered on top of css/base.css
 * (.page/.app-header/.card/etc.) — only rules that don't belong in the
 * shared stylesheet live here.
 */

.session-detail-card {
  margin-top: 18px;
}

.session-detail-card + .session-detail-card,
.session-detail-card--gap {
  margin-top: 12px;
}

.session-detail-card__title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Basic info / additional stats rows. Each `.info-row` is a wrapper
   containing one `.info-row__line` (flex label+value row) and an optional
   `.info-row__subtext` line below it. */
.info-row {
  margin-top: 12px;
}

.info-row:first-child {
  margin-top: 12px;
}

.info-row__label {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.info-row__value {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-primary);
  text-align: right;
}

.info-row__value--aqua {
  color: var(--color-aqua);
}

.info-row__value--gold {
  color: var(--color-gold);
}

.info-row__subtext {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: right;
}

.info-row--fallback .info-row__value {
  color: var(--color-text-muted);
  font-weight: normal;
}

/* Training-used card. */
.training-used-card {
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.training-used-card__title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-primary);
}

.training-used-card__intervals {
  margin-top: 10px;
  text-align: left;
}

.training-used-card__interval {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 4px 0;
}

.training-used-card__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* No-lap-data fallback note. */
.no-lap-data-card {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Lap-timing chart card. */
.lap-chart-canvas {
  display: block;
  width: 100%;
  height: 170px;
  margin-top: 10px;
}

.lap-chart-caption {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Dev-mode technical log link (.tech-log-link) removed 2026-09-29 along
   with the rest of developer mode — see DEVELOPER_MODE_RESTORE.md. */

/* Toast — small bottom banner used for "session not found" and "copied to
   clipboard" feedback (SPEC.md 3.2 SessionDetailActivity.kt strings). No
   shared .toast class exists in css/base.css yet, so it's defined locally
   here (and duplicated in css/stats.css if that page ever needs one) rather
   than editing the shared stylesheet other pages/agents also rely on. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--color-card-bg-dark);
  color: var(--color-text-primary);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  max-width: calc(100% - 40px);
  text-align: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.toast--visible {
  opacity: 1;
}

.session-not-found {
  margin-top: 18px;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.session-not-found__back {
  display: inline-block;
  margin-top: 16px;
}