/* Guided tour + help icon popovers. Tokens from tokens.css so light/dark/ocean/blueprint all work.
   The tour never dims or blocks the page (owner rule 2026-10-16): no scrim, no full-screen overlay,
   no pointer-events blocking. It floats as a compact bar (phone) or small corner panel (PC/tablet). */
.onboarding-spot { position: fixed; z-index: 901; border-radius: var(--r-m); box-shadow: 0 0 0 3px var(--brand); pointer-events: none; transition: top var(--dur-micro), left var(--dur-micro), width var(--dur-micro), height var(--dur-micro); animation: onboarding-pulse var(--dur-breathe) var(--ease-standard, ease-in-out) infinite; }
@keyframes onboarding-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--brand); } 50% { box-shadow: 0 0 0 5px var(--brand); } }

.onboarding-bar { position: fixed; z-index: 902; background: var(--raised); color: var(--ink); box-shadow: var(--shadow-3); box-sizing: border-box; pointer-events: auto; max-height: 25vh; overflow: auto; }
/* Phone: thin bar docked above the safe-area at the bottom, 1-3 lines tall, never covering most of the screen. */
.onboarding-bar--bar { left: 0; right: 0; bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
/* PC/tablet: small card pinned to a corner, out of the way of the main content. */
.onboarding-bar--panel { right: 16px; bottom: 16px; width: 320px; max-width: calc(100vw - 32px); border-radius: var(--r-l); padding: 14px 16px; }

.onboarding-bar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.onboarding-bar-head-actions { display: flex; gap: 2px; }
.onboarding-counter { opacity: .65; }
.onboarding-bar-title { margin: 2px 0; }
.onboarding-bar-text { margin: 0 0 4px; opacity: .85; }
.onboarding-bar-hint { margin: 0 0 8px; opacity: .9; font-style: italic; }
.onboarding-bar-actions { display: flex; justify-content: space-between; gap: 8px; }
.onboarding-bar-actions .ui-btn { min-height: 44px; }
.onboarding-bar-head .ui-iconbtn { min-width: 44px; min-height: 44px; }

/* Collapsed pill: tiny, doesn't block content at all. */
.onboarding-pill-wrap { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 902; }
.onboarding-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: var(--on-brand); border: none; border-radius: var(--r-full); padding: 8px 14px; min-height: 44px; box-shadow: var(--shadow-3); cursor: pointer; }
.onboarding-pill-arrow { opacity: .85; }
.onboarding-pill-next { text-decoration: underline; }

.onboarding-help { position: relative; display: inline-flex; }
.onboarding-help .ui-iconbtn { min-width: 44px; min-height: 44px; }
.onboarding-help-pop { z-index: 500; width: 240px; max-width: calc(100vw - 32px); background: var(--raised); color: var(--ink); border-radius: var(--r-m); box-shadow: var(--shadow-3); padding: 10px 12px; }
.onboarding-help-pop strong { display: block; margin-bottom: 4px; }
.onboarding-help-pop p { margin: 0; opacity: .85; }