/* The coach (docs/roadmap/COACH.md, src/ui/components/coach.js): the statement's 🧑‍🏫 card after bill day and the
   Logbook's 🧑‍🏫 Coach tab. A point is calm, never red: a leak is a chance, not a loss. */

/* ── The statement's card ── */
.stmt-coach {
  border-top: 5px solid var(--sea-400);
}

.stmt-coach p {
  margin: var(--sp-1) 0 0;
}

/* Pip beside the title, both at the start (statement.css's card head, linked later, spreads its items apart). */
.stmt-coach .coach-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
}

.coach-head__pip {
  flex: none;
  line-height: 0;
}

.coach-head__season {
  margin: 0;
}

.coach-back {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sand-100);
}

.coach-back.is-better {
  background: var(--gain-bg);
}

.coach-point {
  margin-top: var(--sp-2);
}

.coach-point__tier {
  font-weight: 800;
  font-size: var(--fs-lg);
}

.coach-point__emoji {
  margin-right: var(--sp-1);
}

.coach-point__try {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sea-50);
}

.coach-clean {
  font-weight: 700;
}

.coach-open {
  margin-top: var(--sp-2);
}

/* ── The Logbook's tab ── */
.coach-page {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 760px) {
  .coach-page {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.coach-page p {
  margin: var(--sp-1) 0 0;
}

.coach-bars,
.coach-seasons {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.coach-bar {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}

.coach-bar__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.coach-bar.is-top .coach-bar__name {
  font-weight: 800;
}

.coach-bar__track {
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--sand-100);
  overflow: hidden;
}

.coach-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sea-300);
}

.coach-bar.is-top .coach-bar__fill {
  background: var(--sea-500);
}

.coach-bar__amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coach-season {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.coach-season:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.coach-season__when {
  font-weight: 700;
}

.coach-season__back {
  color: var(--gain);
}

@media (max-width: 380px) {
  .coach-bar {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto;
  }
}