/* The Professor sticker and his notes */
/* the professor sticker */
.detective.prof, .coach-face { background: url("../img/professor.avif") center bottom / contain no-repeat; width: 170px; }
.detective.prof { width: 170px; height: 240px; right: 26px; object-fit: contain; transform-origin: 50% 100%; animation: profSway 6s ease-in-out infinite; will-change: transform; filter: var(--shadow-figure); }
.hero .detective.prof { pointer-events: auto; cursor: pointer; transition: opacity .3s ease; }
.hero .detective.prof.away, .hero .detective.prof.away ~ .bubble { opacity: 0; }
.hero .bubble { transition: opacity .3s ease; }

/* the Professor's notes: he slides in from a different side each time */
.coach { position: fixed; z-index: 45; display: flex; align-items: flex-end; max-width: min(460px, calc(100vw - 32px)); opacity: 0; pointer-events: none; transition: transform .6s var(--ease-out), opacity .35s ease; }
.coach.left { left: 16px; bottom: 24px; transform: translateX(-120%); }
.coach.right { right: 16px; bottom: 24px; flex-direction: row-reverse; transform: translateX(120%); }
.coach.top { top: 12px; left: 0; right: 0; margin-inline: auto; width: fit-content; align-items: flex-start; transform: translateY(-140%); }
.coach.bottom { bottom: 72px; left: 0; right: 0; margin-inline: auto; width: fit-content; transform: translateY(160%); }
.coach.on { opacity: 1; transform: none; pointer-events: auto; }
.coach-face { width: 112px !important; height: 158px; flex: none; transform-origin: 50% 100%; filter: var(--shadow-figure); }
.coach.on .coach-face { animation: profSway 3s ease-in-out 2; }
.coach.top .coach-face { height: 140px; width: 98px !important; } /* upright, slides down from the top */
.coach-card { position: relative; min-width: 0; margin: 0 0 36px calc(var(--space-xs) * -1); background: var(--sheet); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-sm) var(--space-md) var(--space-sm); box-shadow: var(--shadow-raise); }
.coach.right .coach-card { margin: 0 calc(var(--space-xs) * -1) 36px 0; }
.coach.top .coach-card { margin: var(--space-sm) 0 0 calc(var(--space-xs) * -1); }
.coach-card::before { content: ""; position: absolute; left: -7px; bottom: 22px; width: 13px; height: 13px; background: inherit; border: inherit; border-width: 0 0 1px 1px; transform: rotate(45deg); }
.coach.right .coach-card::before { left: auto; right: -7px; border-width: 1px 1px 0 0; }
.coach.top .coach-card::before { bottom: auto; top: 22px; }
.coach-head { display: flex; align-items: center; gap: var(--space-xs); }
.coach-who { font: 700 var(--text-xs) var(--font-body); color: var(--rust); }
.coach-tag { font: 600 var(--text-xs) var(--font-body); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.coach-tag.math { background: color-mix(in srgb, var(--brass) 22%, transparent); color: var(--fg); }
.coach-x { margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; background: none; border: 0; border-radius: var(--radius-control); color: var(--muted); font-size: var(--text-lg); line-height: 1; cursor: pointer; padding: 0; }
.coach-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.coach-text { margin: var(--space-xs) 0 var(--space-xs); font: italic 400 var(--text-md)/1.5 var(--font-body); text-wrap: pretty; }
@media (max-width: 600px) {
  .coach-face { width: 70px !important; height: 100px; }
  .coach.top .coach-face { width: 60px !important; height: 86px; }
  .coach-card { margin-bottom: 20px; }
  .coach-text { font-size: var(--text-sm); }
}
@keyframes profSway { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-4px); } }
.bubble::after { left: auto; right: 120px; }
/* the bubble sits just above the professor's head, whatever the card height */
.hero .bubble { top: auto; bottom: 252px; width: 200px; font-size: var(--text-sm); line-height: 1.4; padding: var(--space-xs) var(--space-sm); }