/* guia.css — on-screen help walkthroughs (help-guides design). One coral
   ring (the assistant's own mark) + a scrim cutout via box-shadow on a
   single fixed element, so the target itself stays clickable underneath —
   nothing is cloned or moved. Operational screen: no gradients, no glow. */

.guia-spot {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px color-mix(in oklch, var(--ink-900) 45%, transparent);
  transition: top var(--duration-base) var(--ease-out-quart),
    left var(--duration-base) var(--ease-out-quart),
    width var(--duration-base) var(--ease-out-quart),
    height var(--duration-base) var(--ease-out-quart);
}

.guia-tip {
  position: fixed;
  z-index: 201;
  max-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* guia.js hides these with the `hidden` attribute while a step's anchor is
   off-page; `display: flex` above outranks the UA's [hidden] rule. */
.guia-tip[hidden],
.guia-pill[hidden] {
  display: none;
}

.guia-tip-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.guia-tip-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.guia-tip-text {
  margin: 0;
  color: var(--color-text);
}

.guia-tip-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* A fixed, floating tour-tip panel, not a chip — --radius-lg (2026-09-18
   re-skin) matches other floating surfaces rather than the retired button/
   badge pill; already elevated, so this is now --elevation-floating (was
   --shadow-md) to match its actual role. */
.guia-pill {
  position: fixed;
  z-index: 201;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--elevation-floating);
}

@media (prefers-reduced-motion: reduce) {
  .guia-spot {
    transition-duration: 0.001ms;
  }
}