/* Theming. Read `--coach-*` first, then the project's Material tokens, then a neutral default. The defaults used to be a specific project's brand pink, which every other project inherited the moment it did not happen to define `--primary` on an ancestor of - and since the overlay is appended to , a project that scopes its tokens to a page container is exactly that case. Neutral greys are wrong for everyone equally, which is the honest default; the `--coach-*` layer is how a project makes it right without knowing any of this. */ :root { --coach-primary: var(--primary, #5b6b7f); --coach-surface: var(--surface, #ffffff); --coach-on-surface: var(--on-surface, #1b1d21); } body.theme-dark { --coach-surface: var(--surface-container-high, #23262b); --coach-on-surface: var(--on-surface, #eef0f3); } .coach-overlay { position: fixed; inset: 0; z-index: 100000; } .coach-overlay[hidden] { display: none; } .coach-catch { position: absolute; inset: 0; background: transparent; } .coach-overlay.is-centered .coach-catch { background: rgba(15, 10, 12, 0.55); } /* No geometry transition: animating a screen-covering box-shadow across a large move repaints the whole viewport every frame (a visible lag spike, especially next to a panel's own open animation). Snap instead - a single repaint. */ .coach-spot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(15, 10, 12, 0.55); outline: 2px solid var(--coach-primary); outline-offset: 3px; pointer-events: none; } .coach-overlay.is-centered .coach-spot { display: none; } /* Interactive steps must let real taps reach the UI underneath (type in an input, tap Save, tap a passage). pointer-events:none on .coach-catch alone is not enough - the .coach-overlay CONTAINER still captures taps that pass through the catch - so make the whole overlay transparent to pointer events and re-enable only the card (so its own buttons still work). */ .coach-overlay.is-interactive { pointer-events: none; } .coach-overlay.is-interactive .coach-card { pointer-events: auto; } /* Pulsing "tap me" ring on a separate element so the animation composites on the GPU (opacity only) instead of repainting the screen-covering box-shadow on .coach-spot every frame - that full-screen repaint dropped frames while a panel's open animation was running. */ .coach-spot::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px var(--coach-primary); opacity: 0; pointer-events: none; } .coach-overlay.is-interactive .coach-spot::after { animation: coach-ring-pulse 1.4s ease-in-out infinite; will-change: opacity; } @keyframes coach-ring-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .coach-overlay.is-interactive .coach-spot::after { animation: none; } .coach-spot { transition: none; } } .coach-card { position: absolute; width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: 18px 18px 14px; border-radius: 18px; background: var(--coach-surface); color: var(--coach-on-surface); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; } .coach-card > * { grid-column: 1 / -1; } /* Glide the card between steps (e.g. a bottom-bar step to one near the top) instead of jumping. Only the small card moves - the screen-covering box-shadow on .coach-spot is deliberately NOT transitioned (a full-viewport repaint per frame), and the class is only applied for genuine step-to-step moves, then removed so scroll/resize repositioning stays instant. */ .coach-card.is-sliding { transition: top 0.42s cubic-bezier(0.22, 1, 0.36, 1), left 0.42s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .coach-card.is-sliding { transition: none; } } .coach-overlay.is-centered .coach-card { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px)); } .coach-card-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--coach-on-surface) 8%, transparent); color: inherit; cursor: pointer; font-size: 14px; } .coach-card-icon { display: inline-flex; align-items: center; justify-content: center; grid-column: 1; width: 38px; height: 38px; border-radius: 11px; margin: 0 0 8px !important; background: color-mix(in srgb, var(--coach-primary) 16%, transparent); color: var(--coach-primary); font-size: 17px; } .coach-card.has-mascot .coach-card-title { grid-column: 1 / -1; margin-bottom: 6px !important; } .coach-card-close { grid-column: auto; } .coach-card-icon[hidden], .coach-card-mascot[hidden] { display: none !important; } .coach-card-mascot { display: block; width: 84px; height: 84px; margin: -58px 0 6px !important; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18)); pointer-events: none; } .coach-card-title { grid-column: 2; margin: 0 0 8px !important; padding-right: 30px; font-size: 17px; font-weight: 800; line-height: 1.25; } .coach-card-body { margin: 0 !important; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--coach-on-surface) 78%, transparent); } .coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px !important; } .coach-dots { display: inline-flex; gap: 6px; } .coach-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--coach-on-surface) 22%, transparent); } .coach-dot.is-on { background: var(--coach-primary); width: 18px; border-radius: 4px; } .coach-actions { display: inline-flex; align-items: center; gap: 8px; } .coach-hint { font-size: 12.5px; font-style: italic; font-weight: 600; color: var(--coach-primary); } .coach-hint[hidden] { display: none; } .coach-btn { border: 0 !important; border-radius: 999px; margin: 0 !important; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; } .coach-btn--ghost { background: transparent !important; color: color-mix( in srgb, var(--coach-on-surface) 70%, transparent ) !important; } .coach-btn--ghost[hidden] { display: none; } .coach-btn--primary { background: var(--coach-primary) !important; color: #ffffff !important; }