/* fetch-1320: the cameo is decorative, outside the app renderer, and never captures input. */
.cse-mascot-cameo {
  position: fixed;
  right: var(--s-2, 8px);
  bottom: var(--s-2, 8px);
  width: clamp(100px, 10vw, 132px);
  aspect-ratio: 5 / 6;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transform: translateX(calc(100% + var(--s-3, 12px)));
  transition: transform .42s cubic-bezier(.2, .85, .2, 1), opacity .3s ease;
  filter: drop-shadow(0 6px 9px rgba(36, 43, 66, .2));
}
.cse-mascot-cameo.is-visible { opacity: 1; transform: translateX(0); }
.cse-mascot-cameo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 85%; }
.cse-mascot-cameo .cse-mascot-cameo__wave { opacity: 0; }
.cse-mascot-cameo .cse-mascot-cameo__wave[hidden] { display: none; }
.cse-mascot-cameo.is-waving .cse-mascot-cameo__idle { opacity: 0; }
.cse-mascot-cameo.is-waving .cse-mascot-cameo__wave { opacity: 1; animation: cse-mascot-wave .55s ease-in-out 2; }
.cse-mascot-cameo.is-nodding .cse-mascot-cameo__idle { animation: cse-mascot-nod .6s ease-in-out 2; }
@keyframes cse-mascot-wave { 50% { transform: rotate(-7deg) translateY(-3px); } }
@keyframes cse-mascot-nod { 50% { transform: rotate(-5deg) translateY(-3px); } }
@media (max-width: 640px) {
  .cse-mascot-cameo { right: var(--s-1, 4px); width: 100px; }
  body.has-rail .cse-mascot-cameo { bottom: calc(var(--phone-nav-height, 56px) + var(--s-2, 8px) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce), print { .cse-mascot-cameo { display: none !important; } }

/* fetch-1326: an optional, stateful page guide; operational screens keep their controls.
 * Full note: docs/m3-comment-archive/mascot-cameo-css.json #dc726bd9d174389d
 */
.crystal-page-guide[hidden] { display: none; }
.crystal-page-guide__dock { position: fixed; z-index: 26; right: var(--s-3); bottom: var(--s-3); max-width: calc(100vw - 2 * var(--s-3)); }
/* fetch-1500: while the PANEL is open the dock rises above every page-level sticky element - the rail (30), the Staff Plan's
 * Full note: docs/m3-comment-archive/mascot-cameo-css.json #4cc5634557664e8a
 */
.crystal-page-guide__dock:has(.crystal-page-guide__panel) { z-index: 45; }
.crystal-page-guide__launcher { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-height-touch); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-card, white); color: var(--navy); font: inherit; font-size: var(--t-sub); box-shadow: 0 3px 12px rgb(0 0 0 / .12); cursor: pointer; margin-left: auto; }
.crystal-page-guide__launcher img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
/* The page's own Crystal is in view (the Wiki home, the Reports landing): the launcher stays, as the small button
   (crystal-guide.js drops its words), so the page tips are still one press away. */
.crystal-page-guide__launcher.is-compact { width: var(--control-height-touch); height: var(--control-height-touch); padding: 0; justify-content: center; }
.crystal-page-guide__launcher.is-compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crystal-page-guide__launcher.is-compact:hover, .crystal-page-guide__launcher.is-compact:focus-visible { width: auto; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); }
.crystal-page-guide__launcher.is-compact:hover span, .crystal-page-guide__launcher.is-compact:focus-visible span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.crystal-page-guide__panel { position: absolute; right: 0; bottom: calc(100% + var(--s-2)); width: min(24rem, calc(100vw - 2 * var(--s-3))); max-height: min(34rem, 65dvh); overflow-y: auto; overscroll-behavior: contain; background: var(--surface-card, white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 6px 24px rgb(0 0 0 / .14); padding: var(--s-4); font-size: var(--t-body); line-height: 1.5; }
.crystal-page-guide__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.crystal-page-guide h2 { font: inherit; font-weight: 700; color: var(--navy); margin: 0; }
.crystal-page-guide h3 { font-size: var(--t-body); margin: var(--s-4) 0 var(--s-2); }
.crystal-page-guide p { margin: var(--s-2) 0; }
.crystal-page-guide ul { padding-left: var(--s-5); }
.crystal-page-guide li + li { margin-top: var(--s-2); }
.crystal-page-guide .btn { min-height: var(--control-height-touch); white-space: normal; }
.crystal-page-guide__issue { border-left: 2px solid var(--warn-fg); padding-left: var(--s-3); margin: var(--s-3) 0; }
.crystal-page-guide h4 { font-size: var(--t-sub); font-weight: 700; color: var(--navy); margin: var(--s-3) 0 var(--s-1); }
.crystal-page-guide__suggest { border-left: 2px solid var(--info-fg); padding-left: var(--s-3); margin: var(--s-3) 0; }
.crystal-page-guide__detail { display: block; color: var(--muted); font-size: var(--t-sub); margin-top: var(--s-1); }
.crystal-page-guide__purpose { color: var(--ink); }
.crystal-page-guide__wiki { list-style: none; padding-left: 0; }
.crystal-page-guide__link { min-height: var(--control-height-touch); padding: 0; border: 0; background: none; color: var(--navy); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.crystal-page-guide__pause { margin-top: var(--s-3); }
/* fetch-1333: the rail turns into the bottom bar at 900px and below (portal.css), so the launcher and its panel rise over
 * Full note: docs/m3-comment-archive/mascot-cameo-css.json #f9fed91cd9330865
 */
@media (max-width: 900px) {
  body.has-rail .crystal-page-guide__dock { bottom: calc(var(--control-height-touch) + var(--s-3) + var(--s-2) + env(safe-area-inset-bottom, 0px)); }
  body.has-rail .crystal-page-guide__dock.is-docked .crystal-page-guide__panel { bottom: calc(var(--control-height-touch) + var(--s-3) + var(--s-2) + env(safe-area-inset-bottom, 0px)); }
}
/* fetch-1333: docked in the portal's chrome beside a full-bleed Culinary embed or (final review) the Staff Plan up to
 * Full note: docs/m3-comment-archive/mascot-cameo-css.json #d9a5c281e8a67bdc
 */
.crystal-page-guide__dock.is-docked { z-index: 61; }
.crystal-page-guide__dock.is-docked .crystal-page-guide__launcher.is-compact:is(:hover, :focus-visible) { width: var(--control-height-touch); padding: 0; }
.crystal-page-guide__dock.is-docked .crystal-page-guide__launcher.is-compact:is(:hover, :focus-visible) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.crystal-page-guide__dock.is-docked .crystal-page-guide__panel { position: fixed; right: var(--s-3); bottom: var(--s-3); }

/* fetch-1333: "Show me where" - the workspace costume beside the control, and one spoken line that
   names it. Guidance, not decoration: it never takes input, and it shows standing still (no slide)
   for people who turn motion off, where the fetch-1320 cameo hides. */
.crystal-pointer { position: fixed; left: 0; top: 0; z-index: 90; width: 100px; aspect-ratio: 5 / 6; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(var(--s-3)); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .85, .2, 1), visibility 0s linear .25s; filter: drop-shadow(0 6px 9px rgba(36, 43, 66, .22)); }
.crystal-pointer.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .85, .2, 1); }
.crystal-pointer img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* fetch-1333 final review: where the full-size Crystal would cover words or a control, a smaller one stands clear (SMALL_W) */
.crystal-pointer.is-small { width: 72px; }
.crystal-page-guide .crystal-pointer-say { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; margin: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crystal-page-guide .crystal-pointer-say.is-on { width: auto; height: auto; max-width: min(16rem, calc(100vw - 2 * var(--s-2))); overflow: visible; clip-path: none; white-space: normal; padding: var(--s-1) var(--s-2); border: 1px solid var(--gold); border-radius: var(--r-m); background: var(--surface-card, white); color: var(--navy); font-size: var(--t-sub); font-weight: 600; line-height: 1.35; box-shadow: 0 3px 12px rgb(0 0 0 / .14); }
@media (max-width: 640px) { .crystal-pointer { width: 88px; } }
@media (prefers-reduced-motion: reduce) { .crystal-pointer, .crystal-pointer.is-on { transform: none; transition: none; } }
@media print { .crystal-page-guide { display: none !important; } }

/* fetch-1335: the faceted Crystal welcomes and acknowledges with finite motion.
   No endless animation while someone reads or types; reduced motion stays fully static. */
@keyframes crystal-welcome {
  0%, 100% { transform: none; }
  25%, 65% { transform: translateY(-3px) rotate(-3deg); }
  45%, 85% { transform: translateY(-1px) rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .wiki-guide-welcome:not(.wiki-guide-welcome--compact) .wiki-guide-mascot,
  .rpt-guide-mascot { transform-origin: 50% 90%; animation: crystal-welcome 1.8s ease-in-out 1; }
  .crystal-pointer.is-on img { transform-origin: 50% 90%; animation: crystal-welcome 1.4s ease-in-out 1; }
}
@media (prefers-reduced-motion: reduce), print {
  .wiki-guide-mascot, .rpt-guide-mascot, .crystal-pointer img { animation: none !important; }
}

/* fetch-1793: optional art stays inside the existing help/pointer footprint. */
.crystal-helper-art { position: relative; flex: 0 0 6rem; width: 6rem; height: 7.5rem; }
.crystal-helper-art img, .crystal-helper-art canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.crystal-helper-art canvas, .crystal-pointer canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.has-crystal-motion > img { visibility: hidden; }
.crystal-helper-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
@media (prefers-reduced-motion: reduce) { .has-crystal-motion > img { visibility: visible; } .crystal-helper-art canvas, .crystal-pointer canvas { display: none; } }