/* Page Guide — floating capability guide (spec 2026-07-12-page-guides-v2).
   Token-styled: native in standard AND cozy (accent remaps automatically). */

.page-guide {
  position: fixed;
  top: 100px;
  left: 20px;
  z-index: 25000;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  user-select: none;
}

.page-guide .guide-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: grab;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg, #ffffff);
  background: color-mix(in srgb, var(--accent-purple, #6366f1) 14%, var(--bg-solid, #1a1a1a));
  border: 1px solid color-mix(in srgb, var(--accent-purple, #6366f1) 45%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-purple, #6366f1) 25%, transparent);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  touch-action: none;
}

.page-guide .guide-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-purple, #6366f1) 40%, transparent);
}

.page-guide.dragging,
.page-guide.dragging .guide-button {
  cursor: grabbing;
}

.page-guide .guide-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  width: clamp(260px, 88vw, 400px);
  background: var(--bg-solid, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: 16px;
  margin-top: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 25001;
}

.page-guide.align-right .guide-tooltip {
  left: auto;
  right: 0;
}

.page-guide.show-tooltip .guide-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-guide .guide-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, #333);
  background: color-mix(in srgb, var(--accent-purple, #6366f1) 14%, var(--bg-solid, #1a1a1a));
  border-radius: 16px 16px 0 0;
}

.page-guide .guide-header h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--fg, #ffffff);
}

.page-guide .guide-header p {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #999);
}

.page-guide .guide-content {
  padding: 18px 20px;
  max-height: min(60vh, 500px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.page-guide .guide-section {
  margin-bottom: 18px;
}

.page-guide .guide-section:last-child {
  margin-bottom: 0;
}

.page-guide .guide-section h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg, #ffffff);
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-guide .guide-section p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted, #999);
  line-height: 1.45;
}

.page-guide .guide-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-guide .guide-section li {
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--fg, #ffffff);
  line-height: 1.4;
}

.page-guide .guide-item {
  padding: 2px 0;
  color: var(--muted, #bbb);
}

.page-guide .guide-try {
  display: block;
  padding: 7px 12px;
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-purple, #6366f1) 8%, transparent);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page-guide .guide-try:hover {
  background: color-mix(in srgb, var(--accent-purple, #6366f1) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent-purple, #6366f1) 45%, transparent);
}

.page-guide .guide-try:focus-visible,
.page-guide .guide-button:focus-visible {
  outline: 2px solid var(--accent-purple, #6366f1);
  outline-offset: 2px;
}

.page-guide .guide-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg, #ffffff);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-purple, #6366f1) 70%, transparent);
  text-underline-offset: 3px;
}

.page-guide .guide-link:hover {
  text-decoration-color: var(--accent-purple, #6366f1);
}

.page-guide .guide-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border, #333);
}

.page-guide .guide-footer p {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #999);
}

@keyframes pageGuidePulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-purple, #6366f1) 25%, transparent); }
  50% { box-shadow: 0 4px 26px color-mix(in srgb, var(--accent-purple, #6366f1) 70%, transparent); }
}

.page-guide.pulse-once .guide-button {
  animation: pageGuidePulse 1.6s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .page-guide.pulse-once .guide-button {
    animation: none;
  }
}

@media (max-width: 768px) {
  .page-guide { top: 80px; left: 10px; }
}

/* QA R13: hidden while any page modal is open (page-guide.js toggles it) —
   the pill overlapped modal headers at mobile widths. */
#pageGuide.pg-suppressed { display: none !important; }

/* c116: the top/left above are a PLACEHOLDER, not a position — page-guide.js
   computes the real one against the page's occupied edges (sidebar, verify
   nudge, bottom nav). Until that lands the pill sat over the sidebar column
   and then visibly jumped. Stay invisible but LAID OUT — the placement code
   reads offsetWidth/offsetHeight, which display:none would zero. .pg-placed
   is added by place(), with a 4s safety net in build(). */
.page-guide:not(.pg-placed) { visibility: hidden; }