/* prof-helper lectures — small, theme-neutral polish on top of Material. */

:root {
  --md-primary-fg-color: #4f46e5;        /* indigo */
  --md-accent-fg-color: #6366f1;
}

/* Comfortable reading measure for long-form lectures. */
.md-grid {
  max-width: 64rem;
}

/* Landing-page hero. */
.hero {
  text-align: center;
  padding: 2.5rem 1rem 1rem;
}
.hero h1 {
  font-weight: 800;
  font-size: 2.4rem;
  margin: 0.2rem 0;
  letter-spacing: -0.02em;
}
.hero p.tagline {
  font-size: 1.05rem;
  opacity: 0.8;
  max-width: 40rem;
  margin: 0.4rem auto 1.4rem;
}

/* Topic cards (Material grid cards get a lift + accent border). */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.15);
  transform: translateY(-2px);
}

/* A small "lesson meta" line under a lecture title. */
.lesson-meta {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  opacity: 0.75;
  margin-bottom: 1rem;
}
.lesson-meta .chip {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

/* Make Mermaid diagrams sit centered with breathing room. */
.md-typeset .mermaid {
  text-align: center;
  margin: 1.2rem 0;
}

/* Tighten code-tab labels a touch. */
.md-typeset .tabbed-labels > label {
  font-weight: 600;
}