/* 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.
   fetch-1333: the root is a plain container (no box, no stacking context) so the pointer inside it
   can rise above the rail (30) and brand bar (60) while staying under flash (500) and modals (600);
   the dock carries the launcher and panel at the guide's old layer. On every manager page the
   launcher is a 44px Crystal button (the faceted Crystal; the workspace costume is the pointer's);
   its words show when there is something new for this page to review or suggest, and on hover or
   keyboard focus. The accessible name always carries the full label. */
.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
   stuck navy heading (30, R3) and the workspace pin bar (40) - and stays under the flash (500), the modals (600) and the docked
   variant (61): at 26 the stuck heading's tiles intercepted the panel's Close (probe1326). The closed launcher keeps its old
   layer under the rail: raised to 45 it covered the account icon in the bottom bar's More menu at 640x360 (probe1070/1404). */
.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
   it at the same breakpoint - measured from the bar's own height (a touch target plus its padding), as the version pill
   does, never from --phone-nav-height, which is the TOP header's height and grows when that header wraps. */
@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
   1099px (the desktop rail's middle, the phone brand bar beside the bell, or a tablet's bottom bar between two slots;
   crystal-guide.js places it): above the rail (30) and brand bar (60), always the small button (no hover words that
   would spill over the bar's own controls), and the panel opens over the page's bottom-right corner as it does elsewhere. */
.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; }
}