/* Shared header for the private account pages (Calendar, My Transcript,
   Analytics, My Progress): breadcrumb, eyebrow, title and intro line, in the
   style of the My Transcript page. Page bodies keep their own styles.
   Selectors are doubled so they beat each page's older header rules. */
.acct-crumbs.acct-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  font: 500 11px/1.4 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: var(--acct-dim);
}
.acct-crumbs.acct-crumbs a {
  color: inherit;
  text-decoration: none;
}
.acct-crumbs.acct-crumbs a:hover,
.acct-crumbs.acct-crumbs [aria-current] {
  color: var(--acct-brand);
}
.acct-eyebrow.acct-eyebrow {
  display: block;
  margin: 0 0 10px;
  font: 700 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acct-brand);
}
.acct-title.acct-title {
  margin: 0;
  font: 800 clamp(36px, 5.5vw, 60px) / 1.02 Inter, system-ui, sans-serif;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, var(--acct-text) 30%, var(--acct-brand) 70%, var(--acct-teal));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: acct-sheen 6s ease-in-out infinite alternate;
}
@keyframes acct-sheen {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .acct-title.acct-title {
    animation: none;
  }
}
.acct-sub.acct-sub {
  margin: 14px 0 0;
  max-width: 760px;
  color: var(--acct-dim);
  font: 400 16px/1.6 Inter, system-ui, sans-serif;
}
:root {
  --acct-text: #f0eaf7;
  --acct-dim: #a295b4;
  --acct-brand: #bd35e8;
  --acct-teal: #42d5c0;
}
body.shoug-light-mode,
html.calendar-light body {
  --acct-text: #21152f;
  --acct-dim: #6e607d;
  --acct-brand: #9b1fd0;
  --acct-teal: #0f8f7e;
}