/* Home screen. Phones: exam card first, then coach line, today's goal and meters.
   From 1024px: tagline on top, exam card and coach on the left, goal and meters on the right. */

.home-tagline {
  display: none;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: var(--gap);
}

.home-grid,
.home-main,
.home-side {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 2);
}

.exam-card {
  background: var(--ink);
  color: var(--chalk);
  border-radius: var(--radius);
  overflow: hidden;
}

.exam-body {
  padding: calc(var(--gutter) * 1.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exam-kicker {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.exam-facts,
.exam-last {
  font-size: var(--fs-small);
  opacity: 0.85;
}

.exam-start {
  margin-top: var(--gutter);
  min-height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: var(--clay);
  color: var(--action-text);
  font-size: var(--fs-lead);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--ease);
}

.exam-start:hover {
  background: var(--clay-dark);
}

.exam-start:focus-visible {
  outline-color: var(--chalk);
}

.coach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
  padding-left: 12px;
  border-left: 4px solid var(--clay);
}

.coach-text {
  font-weight: 600;
}

.daily {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gutter);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.daily-value {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.meters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

.meter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meter-label {
  font-size: var(--fs-small);
  color: var(--muted);
}

.meter-value {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.meter-track {
  display: block;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  background: var(--clay);
}

@media (min-width: 1024px) {
  body[data-screen="home"] .screen,
  body[data-screen="home"] .topbar-row {
    max-width: var(--max-home);
  }

  .home-tagline {
    display: block;
  }

  .home-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: start;
    gap: calc(var(--gutter) * 1.5);
  }
}