/* Coach hub (/coach): the Play tile and the last 7 days teaser, its small
   treemap tiles smoked glass tinted with each family's colour (--fam). */

body.page-coach-hub { --mode: var(--mino-J); }

.hub-main {
  width: min(1200px, 100%);
}

.hub {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.1rem;
}

/* The home page's Coach card, bigger. */
.hub-play {
  min-height: 300px;
}

.hub-play h3 {
  font-size: 2.2rem;
}

.hub-play p {
  font-size: 1rem;
}

.hub-play .mode-glyph {
  --g: 2.4rem;
}

.hub-teaser {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none;
}

.hub-teaser:hover {
  border-color: var(--mode-line);
  text-decoration: none;
}

.hub-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.hub-figure {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}

.hub-figure b {
  display: block;
  color: var(--text);
  font-size: 1.5rem;
}

.hub-figure > span {
  color: var(--muted);
  font-size: var(--text-min);
}

.hub-mini {
  position: relative;
  height: 120px;
}

.hub-tile {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--fam) 55%, transparent);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.015) 38%,
      rgba(255, 255, 255, 0) 38.5%),
    color-mix(in srgb, var(--fam) 22%, var(--panel));
}

.hub-top {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.hub-more {
  color: var(--accent);
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  .hub {
    grid-template-columns: 1fr;
  }

  .hub-play {
    min-height: 200px;
  }
}

/* The Drill panel under the Play tile: a line, the week's biggest kinds
   as buttons, and the way to every kind. */
.hub-drill {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.hub-drill p {
  margin: 0;
}

.hub-drill-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}