/* ============================================================================
 * Project Onboarding UI — header pill, slide-over drawer, welcome modal.
 *
 * Design goals:
 *   - Pill fits in with the existing nav controls (height/spacing).
 *   - Progress ring is a CSS conic-gradient driven by --pct (0..100).
 *   - Drawer is fixed-position, slides in from the right, dismissable.
 *   - Light & dark theme support via :root + html[data-theme="dark"].
 * ============================================================================ */


/* ---------------------------------------------------------------------------
 * Theme variables
 * --------------------------------------------------------------------------- */
:root {
  --onb-accent: #2563eb;
  --onb-accent-soft: rgba(37, 99, 235, 0.12);
  --onb-accent-border: rgba(37, 99, 235, 0.32);
  --onb-success: #16a34a;
  --onb-success-soft: rgba(22, 163, 74, 0.14);
  --onb-warn: #f59e0b;
  --onb-ring-bg: rgba(0, 0, 0, 0.10);
  --onb-text: #1f2937;
  --onb-text-muted: #6b7280;
  --onb-card-bg: #ffffff;
  --onb-card-border: rgba(0, 0, 0, 0.08);
  --onb-row-bg: #ffffff;
  --onb-row-bg-hover: #f9fafb;
  --onb-drawer-bg: #ffffff;
  --onb-drawer-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
}

html[data-theme="dark"] {
  --onb-accent: #6ea8fe;
  --onb-accent-soft: rgba(110, 168, 254, 0.18);
  --onb-accent-border: rgba(110, 168, 254, 0.42);
  --onb-success: #4ade80;
  --onb-success-soft: rgba(74, 222, 128, 0.18);
  --onb-warn: #fbbf24;
  --onb-ring-bg: rgba(255, 255, 255, 0.10);
  --onb-text: #e5e7eb;
  --onb-text-muted: #9ca3af;
  --onb-card-bg: #1f2937;
  --onb-card-border: rgba(255, 255, 255, 0.08);
  --onb-row-bg: #1f2937;
  --onb-row-bg-hover: #273241;
  --onb-drawer-bg: #111827;
  --onb-drawer-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}


/* ---------------------------------------------------------------------------
 * Header pill
 *
 * Critical UI element: stays visible whenever a project has incomplete
 * setup tasks. data-nav-priority-rank=210 means it only collapses to the
 * overflow menu AFTER weather, QR invite, helper search, Guide Me, Home,
 * and the company display have all collapsed first. If it does end up in
 * the overflow menu, the rules at the bottom of this file restore the
 * full label so the user can read it clearly.
 * --------------------------------------------------------------------------- */
.onboarding-pill {
  --pct: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  margin-right: 0.5rem;
  border: 1px solid var(--onb-accent-border);
  border-radius: 999px;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  /* Belt-and-suspenders: never let other nav siblings overlap the pill,
     and reserve enough min-width for the ring + 3-digit percentage so the
     ring can't clip if a parent flex container under-allocates space. */
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  min-width: 2.2rem;
  white-space: nowrap;
}
.onboarding-pill:hover { filter: brightness(1.06); }
.onboarding-pill:active { transform: translateY(1px); }
.onboarding-pill[hidden] { display: none !important; }

.onboarding-pill.is-complete {
  background: var(--onb-success-soft);
  border-color: var(--onb-success);
  color: var(--onb-success);
}

.onboarding-pill-ring {
  --size: 1.85rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(currentColor calc(var(--pct) * 1%), var(--onb-ring-bg) 0);
  flex: none;
}
.onboarding-pill-ring-inner {
  background: var(--onb-card-bg);
  border-radius: 50%;
  width: calc(var(--size) - 0.35rem);
  height: calc(var(--size) - 0.35rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onboarding-pill-pct {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--onb-text);
}
html[data-theme="dark"] .onboarding-pill-pct { color: #e5e7eb; }

.onboarding-pill-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.onboarding-pill-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.onboarding-pill-sub { font-size: 0.7rem; opacity: 0.85; font-weight: 600; }

.onboarding-pill.is-pulse { animation: onb-pulse 1.6s ease-in-out 0s 2; }
@keyframes onb-pulse {
  0%   { box-shadow: 0 0 0 0 var(--onb-accent-soft); }
  50%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}


/* ---------------------------------------------------------------------------
 * Slide-over drawer
 *
 * Drawer + dim overlay anchor to ``--onboarding-top-offset`` — a dedicated
 * variable owned by this module so we don't fight with page-chrome.css
 * (which pins ``--page-chrome-navbar-offset`` to 56px = exact nav height,
 * leaving no breathing room and clipping the drawer's title bar behind
 * the nav's bottom border).
 *
 * Default ``64px`` = 56px ``.top-nav`` height + 8px clearance. On mobile
 * the nav switches to ``height: auto; flex-wrap: wrap`` so it can grow
 * taller; ``onboarding.js`` re-measures the live nav and rewrites this
 * variable just before the drawer slides in.
 *
 * The drawer footer reserves ~80px on the right so its Recheck / Snooze
 * buttons clear the always-on AI chat icon (``.floating-chat-icon`` is
 * fixed at ``right: 20px; width: 50px``, taking the bottom-right ~70px
 * of any drawer that touches the viewport's right edge).
 * --------------------------------------------------------------------------- */
:root {
  --onboarding-top-offset: 64px;
  --onboarding-footer-right-clear: 80px;
}

.onboarding-drawer-overlay {
  position: fixed;
  top: var(--onboarding-top-offset, 64px);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.onboarding-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.onboarding-drawer {
  position: fixed;
  top: var(--onboarding-top-offset, 64px);
  right: 0;
  bottom: 0;
  height: auto;                    /* implicit: 100vh − top offset */
  width: min(440px, 96vw);
  background: var(--onb-drawer-bg);
  color: var(--onb-text);
  z-index: 1090;
  box-shadow: var(--onb-drawer-shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.25s ease;
  border-left: 1px solid var(--onb-card-border);
  border-top: 1px solid var(--onb-card-border);
}
.onboarding-drawer.is-open { transform: translateX(0); }
.onboarding-drawer[hidden] { display: flex; }

.onboarding-drawer-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--onb-card-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.onboarding-drawer-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.onboarding-drawer-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--onb-text-muted);
}
.onboarding-drawer-close {
  background: transparent;
  border: 0;
  font-size: 1.15rem;
  color: var(--onb-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
}
.onboarding-drawer-close:hover { background: var(--onb-row-bg-hover); color: var(--onb-text); }

.onboarding-drawer-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--onb-card-border);
  padding: 0 0.5rem;
  background: var(--onb-row-bg);
}
.onboarding-drawer-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--onb-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.onboarding-drawer-tab.active {
  color: var(--onb-accent);
  border-bottom-color: var(--onb-accent);
}
.onboarding-drawer-tab-count {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--onb-row-bg-hover);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: var(--onb-text-muted);
}
.onboarding-drawer-tab.active .onboarding-drawer-tab-count {
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
}

.onboarding-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 1rem;
}
.onboarding-drawer-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--onb-text-muted);
}

.onboarding-drawer-footer {
  /* Right padding is bumped to var(--onboarding-footer-right-clear) so the
     Recheck / Snooze buttons don't sit underneath the always-on AI chat
     icon (.floating-chat-icon, fixed bottom-right at z-index 10050 — well
     above the drawer's 1090). 1.25rem on the left keeps visual balance
     with the rest of the drawer's column gutter. */
  padding: 0.75rem var(--onboarding-footer-right-clear, 80px) 0.75rem 1.25rem;
  border-top: 1px solid var(--onb-card-border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  background: var(--onb-row-bg);
}


/* ---------------------------------------------------------------------------
 * Step card (rendered by JS into the drawer body)
 * --------------------------------------------------------------------------- */
.onb-step {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: var(--onb-row-bg);
  border: 1px solid var(--onb-card-border);
  border-radius: 10px;
  margin-bottom: 0.55rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onb-step:hover { background: var(--onb-row-bg-hover); }
.onb-step.is-complete { border-color: var(--onb-success); background: var(--onb-success-soft); }

.onb-step-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.onb-step.is-complete .onb-step-icon { background: var(--onb-success); color: #fff; }

.onb-step-body { flex: 1 1 auto; min-width: 0; }
.onb-step-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--onb-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.onb-step-label .onb-step-status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--onb-row-bg-hover);
  color: var(--onb-text-muted);
}
.onb-step.is-complete .onb-step-status-pill {
  background: var(--onb-success);
  color: #fff;
}
.onb-step-recently {
  background: var(--onb-warn);
  color: #fff !important;
}

.onb-step-desc {
  font-size: 0.825rem;
  color: var(--onb-text-muted);
  margin: 0.2rem 0 0.45rem;
  line-height: 1.35;
}
.onb-step-why {
  font-size: 0.78rem;
  color: var(--onb-text-muted);
  margin: 0.1rem 0 0.45rem;
  font-style: italic;
  opacity: 0.85;
}
.onb-step-hint {
  font-size: 0.78rem;
  color: var(--onb-text-muted);
  margin: 0.1rem 0 0.45rem;
}
.onb-step-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.onb-step-go {
  appearance: none;
  border: 0;
  background: var(--onb-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.onb-step-go:hover { filter: brightness(1.07); }
.onb-step.is-complete .onb-step-go { background: var(--onb-success); }
.onb-step-locked {
  font-size: 0.72rem;
  color: var(--onb-text-muted);
  font-style: italic;
}


/* ---------------------------------------------------------------------------
 * Banner (visible in chat or near top of the page) — currently rendered
 * inside the welcome modal lead. Kept here for future inline banner use.
 * --------------------------------------------------------------------------- */
.onb-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  border: 1px solid var(--onb-accent-border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.onb-banner .onb-banner-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.8;
}
.onb-banner .onb-banner-close:hover { opacity: 1; }


/* ---------------------------------------------------------------------------
 * Welcome modal
 * --------------------------------------------------------------------------- */
.onboarding-welcome-content {
  background: var(--onb-drawer-bg);
  color: var(--onb-text);
}
html[data-theme="dark"] .onboarding-welcome-content .modal-header,
html[data-theme="dark"] .onboarding-welcome-content .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
.onboarding-welcome-lead {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.onboarding-welcome-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.4rem;
}
.onboarding-welcome-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--onb-row-bg);
  border: 1px solid var(--onb-card-border);
  border-radius: 8px;
  font-size: 0.9rem;
}
.onboarding-welcome-points li.is-complete { opacity: 0.75; }
.onboarding-welcome-points li .badge-ok {
  color: var(--onb-success);
}

/* First-setup list in the welcome modal. These are the lists that later
   screens read from — set them before the first shift. Two columns on
   a desktop so the eight items stay on one screen. */
.onboarding-welcome-pillars {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
@media (max-width: 575.98px) {
  .onboarding-welcome-pillars { grid-template-columns: 1fr; }
}
button.onboarding-welcome-pillar {
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.onboarding-welcome-pillar:hover,
button.onboarding-welcome-pillar:focus-visible {
  border-color: var(--onb-accent);
  outline: none;
}
button.onboarding-welcome-pillar:disabled {
  cursor: default;
  opacity: 0.7;
}
.onboarding-welcome-pillar {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--onb-row-bg);
  border: 1px solid var(--onb-card-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onboarding-welcome-pillar.is-complete {
  border-color: var(--onb-success);
  background: var(--onb-success-soft);
}
.onboarding-welcome-pillar-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex: 0 0 auto;
}
.onboarding-welcome-pillar.is-complete .onboarding-welcome-pillar-icon {
  background: var(--onb-success);
  color: #fff;
}
.onboarding-welcome-pillar-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
  line-height: 1.35;
}
.onboarding-welcome-pillar-body strong { font-weight: 700; }
.onboarding-welcome-pillar-body span {
  color: var(--onb-text-muted);
  font-size: 0.86rem;
}

.onboarding-welcome-foot { color: var(--onb-text-muted); font-size: 0.85rem; margin-bottom: 0; }


/* ---------------------------------------------------------------------------
 * Empty states
 * --------------------------------------------------------------------------- */
.onb-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--onb-text-muted);
  font-size: 0.9rem;
}
.onb-empty .onb-empty-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.4rem;
  color: var(--onb-success);
}


/* ---------------------------------------------------------------------------
 * Learn tab — Walkthrough Library recommendations
 *
 * Reuses .onb-step for the card frame so a walkthrough reads as the same kind
 * of object as a checklist item; only the extras below are new.
 * --------------------------------------------------------------------------- */
.onb-learn-intro {
  font-size: 0.8rem;
  color: var(--onb-text-muted);
  margin: 0.75rem 1rem 0.5rem;
  line-height: 1.4;
}
.onb-learn-meta {
  font-size: 0.72rem;
  color: var(--onb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
}
.onb-learn-times {
  font-weight: 600;
  opacity: 0.9;
}
.onb-learn-about {
  font-size: 0.78rem;
  color: var(--onb-accent);
  text-decoration: none;
  margin-left: 0.6rem;
}
.onb-learn-about:hover { text-decoration: underline; }

.onb-learn-resume {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0.25rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--onb-accent-border);
  background: var(--onb-accent-soft);
  border-radius: 0.6rem;
}
.onb-learn-resume-body { flex: 1 1 auto; min-width: 0; }
.onb-learn-resume-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--onb-text);
}
.onb-learn-resume-meta {
  font-size: 0.76rem;
  color: var(--onb-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onb-learn-footer {
  padding: 0.65rem 1rem 1rem;
  text-align: center;
}
.onb-learn-all {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--onb-accent);
  text-decoration: none;
}
.onb-learn-all:hover { text-decoration: underline; }


/* ---------------------------------------------------------------------------
 * "Here is where help lives" acknowledgement
 *
 * A one-time, undismissable modal for new accounts. Deliberately quieter than
 * the welcome modal — it is an instruction to remember, not a pitch — but the
 * primary button is oversized because it is the one thing on screen we want
 * pressed.
 * --------------------------------------------------------------------------- */
.onboarding-ack-content {
  background: var(--onb-drawer-bg);
  color: var(--onb-text);
  border: 1px solid var(--onb-accent-border);
  border-radius: 14px;
}
html[data-theme="dark"] .onboarding-ack-content .modal-header,
html[data-theme="dark"] .onboarding-ack-content .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
.onboarding-ack-lead {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* The instruction itself. Boxed and accented so it survives being skimmed. */
.onboarding-ack-where {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: var(--onb-accent-soft);
  border: 1px solid var(--onb-accent-border);
  border-radius: 10px;
}
.onboarding-ack-where-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--onb-accent);
  color: #fff;
  font-size: 1.1rem;
}
.onboarding-ack-where-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.onboarding-ack-chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  background: var(--onb-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

.onboarding-ack-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}
.onboarding-ack-points li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--onb-text);
}
.onboarding-ack-points i {
  margin-top: 0.2rem;
  color: var(--onb-accent);
}
.onboarding-ack-foot {
  font-size: 0.85rem;
  color: var(--onb-text-muted);
  margin: 0;
}
.onboarding-ack-footer {
  /* Primary on the right, and the "I already know" escape hatch deliberately
     understated on the left — it records the same acknowledgement, so it is
     not a dismissal, but it should not be the obvious thing to click. */
  justify-content: space-between;
}


/* ---------------------------------------------------------------------------
 * Spotlight
 *
 * Used to answer "where?" by pointing rather than describing: the header pill
 * or user-menu entry after the acknowledgement, and the Learn tab once the
 * drawer is open. Long and unmissable on purpose — a single quick flash gets
 * missed by exactly the person who needed it.
 * --------------------------------------------------------------------------- */
.onboarding-spotlight {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  animation: onb-spotlight 1.4s ease-out infinite;
}
@keyframes onb-spotlight {
  0%   { box-shadow: 0 0 0 0 var(--onb-accent-border), 0 0 0 0 var(--onb-accent-soft); }
  70%  { box-shadow: 0 0 0 6px transparent, 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  /* Still has to be findable without the pulse, so hold a static ring. */
  .onboarding-spotlight {
    animation: none;
    box-shadow: 0 0 0 3px var(--onb-accent-border);
  }
}


/* ---------------------------------------------------------------------------
 * Coach
 *
 * The overlay behind "Show me where it is": a ring around the control the
 * user has to click next, a pointer that glides to it, and a box naming the
 * click. It has to clear the top nav (z-index 8000), because the first two
 * controls are in it, and the drawer (1090), because the last one is.
 *
 * Everything except the tip box is inert. The user is the one doing the
 * clicking, so their clicks have to reach the real control through this, and
 * somebody who ignores the coach has to be able to carry on working.
 * --------------------------------------------------------------------------- */
.onboarding-coach {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
/* The control is momentarily gone — usually the half-second while the drawer
   slides in. Fade rather than jump, and never point at nothing. */
.onboarding-coach.is-waiting .onboarding-coach-ring,
.onboarding-coach.is-waiting .onboarding-coach-cursor {
  opacity: 0.3;
}

/* The ring doubles as the page dimmer: the outer spread darkens everything
   around it, which is what leaves one small control as the only lit thing on
   the page. */
.onboarding-coach-ring {
  position: fixed;
  border-radius: 10px;
  border: 2px solid var(--onb-accent);
  box-shadow:
    0 0 0 4px var(--onb-accent-soft),
    0 0 0 9999px rgba(15, 23, 42, 0.45);
  transition: opacity 0.2s ease;
}
.onboarding-coach-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 2px solid var(--onb-accent);
  animation: onb-coach-pulse 1.5s ease-out infinite;
}
@keyframes onb-coach-pulse {
  0%   { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.2);  opacity: 0; }
}

/* Positioned by transform every frame from onboarding.js. */
.onboarding-coach-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.6));
  will-change: transform;
  transition: opacity 0.2s ease;
}
.onboarding-coach-cursor i { position: relative; z-index: 1; }
.onboarding-coach-tap {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: var(--onb-accent);
  opacity: 0;
}
.onboarding-coach-cursor.is-tapping .onboarding-coach-tap {
  animation: onb-coach-tap 1.1s ease-out 2;
}
@keyframes onb-coach-tap {
  0%   { transform: scale(0.35); opacity: 0.7; }
  100% { transform: scale(1.5);  opacity: 0; }
}

.onboarding-coach-tip {
  position: fixed;
  left: 0;
  top: 0;
  width: min(22rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--onb-drawer-bg);
  color: var(--onb-text);
  border: 1px solid var(--onb-accent-border);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
  pointer-events: auto;
}
.onboarding-coach-count {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--onb-accent);
}
.onboarding-coach-label {
  font-size: 1rem;
  line-height: 1.35;
}
.onboarding-coach-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--onb-text-muted);
}
.onboarding-coach-skip {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--onb-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.onboarding-coach-skip:hover { color: var(--onb-text); }
.onboarding-coach.is-done .onboarding-coach-count { color: var(--bs-success); }

@media (prefers-reduced-motion: reduce) {
  /* The pointer still moves — it is snapped frame to frame by the script
     rather than eased — but nothing here loops on its own. */
  .onboarding-coach-ring::after,
  .onboarding-coach-cursor.is-tapping .onboarding-coach-tap {
    animation: none;
  }
  .onboarding-coach-cursor.is-tapping .onboarding-coach-tap { opacity: 0.45; }
}


/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Pill rendering shrinks in stages as horizontal space tightens:
 *
 *   ≥ 1200px ............ full pill: ring + "Project Setup" + "X of Y done"
 *   1100–1199px ......... drop the sub-label ("X of Y done"); keep title
 *   900–1099px .......... drop the title; keep the ring + percentage only
 *   ≤ 899px ............. ring + percentage, slightly tighter padding
 *
 * `body.nav-compact` is toggled by the top-nav overflow logic when items
 * have been pushed into the overflow menu — we mirror the same compact
 * rendering even on wider physical viewports so the pill never widens
 * back out after compaction has started.
 * --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .onboarding-pill .onboarding-pill-sub { display: none; }
}
@media (max-width: 1099px) {
  .onboarding-pill .onboarding-pill-title { display: none; }
  .onboarding-pill { padding: 0.3rem 0.55rem 0.3rem 0.35rem; gap: 0.35rem; }
}
@media (max-width: 899px) {
  .onboarding-pill { padding: 0.25rem 0.45rem 0.25rem 0.3rem; }
}
@media (max-width: 540px) {
  .onboarding-drawer { width: 100vw; }
}

/* Same compact rendering when the header has shoved items into the
   overflow menu — keeps the pill from re-expanding into the row. */
body.nav-compact .onboarding-pill .onboarding-pill-sub,
body.nav-super-compact .onboarding-pill .onboarding-pill-sub {
  display: none;
}
body.nav-super-compact .onboarding-pill .onboarding-pill-title {
  display: none;
}


/* ---------------------------------------------------------------------------
 * Pill inside the overflow menu
 *
 * If the user's window is tiny enough that even the pill gets pushed into
 * the overflow menu, the menu has plenty of vertical space — restore the
 * full label so the user can read what the pill represents.
 * --------------------------------------------------------------------------- */
.nav-overflow-menu .onboarding-pill {
  width: 100%;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-right: 0;
}
.nav-overflow-menu .onboarding-pill .onboarding-pill-label { display: inline-flex !important; }
.nav-overflow-menu .onboarding-pill .onboarding-pill-title,
.nav-overflow-menu .onboarding-pill .onboarding-pill-sub {
  display: inline-block !important;
}