/* ORA's guide for new users (ora-guide.js): the tour and tips, each stage's card, the beacons, the Guide button with its
 * menu and drawers, and "How ORA works" in the What is ORA? window. Loaded in the cockpit and, for the stage cards and
 * "About this page", in the dashboard frame. ORA's own type and lavender; no coloured stripes on cards. */

:root {
  --og-ink: #1a1226;
  --og-text: #3a2f4a;
  --og-mute: #6b5f7c;
  --og-lav: #7c3aed;
  --og-lav-deep: #5b21b6;
  --og-lav-soft: #f3eefe;
  --og-line: rgba(124, 58, 237, .16);
  --og-glass: rgba(255, 255, 255, .94);
  --og-shadow: 0 24px 60px -28px rgba(45, 20, 90, .55), 0 2px 8px -2px rgba(45, 20, 90, .12);
  --og-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --og-serif: 'Playfair Display', Georgia, serif;
}

/* ---------- Spotlight and popover (tour and first-use tips) ---------- */
.og-scrim { position: fixed; inset: 0; z-index: 9000; background: transparent; }
.og-spot {
  position: fixed; z-index: 9001; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 9999px rgba(26, 16, 44, .46);
  transition: top .32s cubic-bezier(.2, .8, .2, 1), left .32s cubic-bezier(.2, .8, .2, 1), width .32s cubic-bezier(.2, .8, .2, 1), height .32s cubic-bezier(.2, .8, .2, 1);
}
.og-spot.is-soft { box-shadow: 0 0 0 3px rgba(124, 58, 237, .55), 0 0 0 9px rgba(124, 58, 237, .12); }

.og-pop {
  position: fixed; z-index: 9002; width: 320px; max-width: calc(100vw - 32px);
  padding: 16px 18px 14px; border-radius: 16px; background: var(--og-glass);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--og-shadow);
  backdrop-filter: blur(14px); font-family: var(--og-sans); color: var(--og-text);
  animation: og-rise .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes og-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.og-pop::before { /* the pointer toward what it explains */
  content: ""; position: absolute; width: 12px; height: 12px; background: var(--og-glass);
  border-left: 1px solid rgba(255, 255, 255, .9); border-top: 1px solid rgba(255, 255, 255, .9);
  transform: rotate(45deg); left: var(--og-arrow-x, 24px); top: -7px;
}
.og-pop[data-side="top"]::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.og-pop[data-side="left"]::before { left: auto; right: -7px; top: var(--og-arrow-y, 22px); transform: rotate(135deg); }
.og-pop[data-side="right"]::before { left: -7px; top: var(--og-arrow-y, 22px); transform: rotate(-45deg); }
.og-pop[data-side="none"]::before { display: none; }
.og-pop-head { display: flex; align-items: flex-start; gap: 10px; }
.og-pop-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--og-lav-soft); color: var(--og-lav); font-size: 16px; }
.og-pop h3 { margin: 3px 0 0; font: 700 15px/1.3 var(--og-sans); color: var(--og-ink); letter-spacing: -.005em; }
.og-pop p { margin: 8px 0 0; font: 400 13.5px/1.55 var(--og-sans); color: var(--og-text); }
.og-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.og-dots { display: flex; gap: 5px; margin-right: auto; }
.og-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ddd3f3; }
.og-dots i.is-on { background: var(--og-lav); width: 16px; border-radius: 4px; }
.og-spacer { margin-right: auto; }
.og-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--og-mute); font-size: 15px; cursor: pointer; }
.og-close:hover { background: #f1ecfa; color: var(--og-ink); }

.og-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; font: 600 13px var(--og-sans); cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.og-btn.is-primary { background: var(--og-lav); color: #fff; box-shadow: 0 8px 18px -10px rgba(124, 58, 237, .9); }
.og-btn.is-primary:hover { background: var(--og-lav-deep); }
.og-btn.is-quiet { background: transparent; color: var(--og-lav-deep); }
.og-btn.is-quiet:hover { background: var(--og-lav-soft); }
.og-btn.is-line { background: #fff; color: var(--og-lav-deep); border-color: var(--og-line); }
.og-btn.is-line:hover { border-color: rgba(124, 58, 237, .4); }
.og-btn i { font-size: 15px; }

/* A ready-made question that fills Ask ORA's box. */
.og-try { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--og-line); background: #fff; color: var(--og-lav-deep); font: 600 13px/1.4 var(--og-sans); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.og-try:hover { border-color: rgba(124, 58, 237, .45); box-shadow: 0 8px 20px -14px rgba(91, 33, 182, .7); }
.og-try i { flex: none; margin-top: 1px; font-size: 15px; color: var(--og-lav); }

/* ---------- Invite cards (first sign-in, first workspace visit) ---------- */
.og-invite {
  position: fixed; z-index: 8800; right: 24px; bottom: 24px; width: 360px; max-width: calc(100vw - 32px);
  padding: 18px 18px 16px; border-radius: 18px; background: var(--og-glass); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--og-shadow); backdrop-filter: blur(14px); font-family: var(--og-sans);
  animation: og-rise .3s cubic-bezier(.2, .8, .2, 1);
}
.og-invite-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, #8b5cf6, #5b21b6); color: #fff; font-size: 20px; box-shadow: 0 10px 20px -12px rgba(91, 33, 182, .9); }
.og-invite h3 { margin: 12px 0 0; font: 700 17px/1.3 var(--og-serif); color: var(--og-ink); }
.og-invite p { margin: 6px 0 0; font: 400 13.5px/1.5 var(--og-sans); color: var(--og-text); }
.og-invite .og-pop-foot { margin-top: 14px; }

/* ---------- "What you're looking at" (first visit to each stage) ---------- */
.og-page-card {
  position: relative; margin: 0 0 18px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(247, 243, 255, .92));
  border: 1px solid rgba(124, 58, 237, .14); box-shadow: 0 18px 40px -32px rgba(45, 20, 90, .5);
  font-family: var(--og-sans); color: var(--og-text); animation: og-rise .3s cubic-bezier(.2, .8, .2, 1);
}
.og-page-card h3 { margin: 0; padding-right: 36px; font: 700 18px/1.3 var(--og-serif); color: var(--og-ink); }
.og-page-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 22px; margin-top: 12px; }
@media (max-width: 1100px) { .og-page-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.og-page-grid h4 { margin: 0 0 6px; font: 700 12.5px var(--og-sans); color: var(--og-mute); }
.og-page-grid p { margin: 0; font-size: 14px; line-height: 1.55; }
.og-steps { margin: 0; padding: 0; list-style: none; counter-reset: og; display: grid; gap: 6px; }
.og-steps li { position: relative; padding-left: 28px; font-size: 13.5px; line-height: 1.5; counter-increment: og; }
.og-steps li::before { content: counter(og); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--og-lav-soft); color: var(--og-lav-deep); font: 700 11px var(--og-sans); }
.og-page-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.og-page-foot small { margin-right: auto; color: var(--og-mute); font-size: 12.5px; }

/* Once read, the card folds into one quiet link beside the page title. */
.og-about { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--og-line); background: rgba(255, 255, 255, .8); color: var(--og-lav-deep); font: 600 12px var(--og-sans); vertical-align: middle; cursor: pointer; }
.og-about:hover { border-color: rgba(124, 58, 237, .4); }
.og-about i { font-size: 13px; }

/* ---------- Beacons: a soft pulse on something not tried yet ---------- */
.og-beacon { position: fixed; z-index: 8600; width: 14px; height: 14px; border: 0; padding: 0; border-radius: 50%; background: var(--og-lav); box-shadow: 0 0 0 3px #fff; cursor: pointer; }
.og-beacon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(124, 58, 237, .55); animation: og-pulse 1.8s ease-out infinite; }
@keyframes og-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .og-beacon::after { animation: none; } .og-spot { transition: none; } }

/* ---------- The Guide button and its menu (always there) ---------- */
/* A round button at the bottom left: it takes nothing from the header, which is already measured to fit, and the
   bottom left is clear on every page (windows keep their own buttons at the bottom right). Its ring fills as the
   Getting started steps get done. */
.og-guide-btn { position: fixed; z-index: 8700; left: 20px; bottom: 20px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(var(--og-lav) var(--og-pct, 0%), rgba(124, 58, 237, .22) 0); color: var(--og-lav-deep); box-shadow: 0 14px 30px -14px rgba(60, 20, 120, .7); cursor: pointer; }
.og-guide-btn::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.og-guide-btn:hover::before { background: #f7f3ff; }
.og-guide-btn i { position: relative; font-size: 22px; }
.og-menu { position: fixed; z-index: 9600; width: 340px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid rgba(124, 58, 237, .14); box-shadow: var(--og-shadow); font-family: var(--og-sans); animation: og-rise .18s ease; }
.og-menu-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 10px 10px; border: 0; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; color: var(--og-ink); }
.og-menu-item:hover { background: #f6f2fe; }
.og-menu-item > i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--og-lav-soft); color: var(--og-lav); font-size: 16px; }
.og-menu-item span { display: grid; gap: 2px; font: 600 13.5px var(--og-sans); }
.og-menu-item small { font: 400 12.5px/1.4 var(--og-sans); color: var(--og-mute); }
.og-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid #efe9f8; }
.og-check { padding: 8px 10px 4px; }
.og-check-head { display: flex; align-items: center; justify-content: space-between; font: 700 13px var(--og-sans); color: var(--og-ink); }
.og-check-head small { font: 600 12px var(--og-sans); color: var(--og-mute); }
.og-check-bar { height: 5px; margin: 8px 0 6px; border-radius: 999px; background: #efe8fb; overflow: hidden; }
.og-check-bar i { display: block; height: 100%; border-radius: inherit; background: var(--og-lav); transition: width .3s ease; }
.og-check ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.og-check li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font: 500 13px var(--og-sans); color: var(--og-text); }
.og-check li i { font-size: 16px; color: #c9bce6; }
.og-check li.is-done { color: var(--og-mute); text-decoration: line-through; text-decoration-color: #cbbfe3; }
.og-check li.is-done i { color: #16a34a; }

/* ---------- Drawers: the glossary, How ORA works ---------- */
.og-drawer { position: fixed; z-index: 9650; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; display: flex; flex-direction: column; background: #fff; box-shadow: -30px 0 60px -40px rgba(45, 20, 90, .6); font-family: var(--og-sans); animation: og-slide .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes og-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.og-drawer-head { padding: 22px 22px 12px; border-bottom: 1px solid #f0eaf8; }
.og-drawer-head h2 { margin: 0; font: 700 22px var(--og-serif); color: var(--og-ink); }
.og-drawer-head p { margin: 4px 0 12px; font-size: 13px; color: var(--og-mute); }
.og-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid #e5dcf5; background: #fbf9ff; }
.og-search input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 14px var(--og-sans); color: var(--og-ink); }
.og-drawer-body { flex: 1; overflow: auto; padding: 8px 14px 24px; }
.og-term { padding: 12px 10px; border-radius: 12px; }
.og-term + .og-term { border-top: 1px solid #f3eff9; }
.og-term h3 { margin: 0; font: 700 14px var(--og-sans); color: var(--og-ink); }
.og-term p { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--og-text); }
.og-term button { border: 0; padding: 0; background: none; color: var(--og-lav); font: 600 12.5px var(--og-sans); cursor: pointer; }
.og-term .og-steps { margin: 6px 0 8px; }
.og-empty { padding: 12px; color: var(--og-mute); font-size: 13.5px; }

/* ---------- "How ORA works" in the What is ORA? window, beside its elephant ---------- */
.og-how { font-family: var(--og-sans); }
.og-how h2 { margin: 0; font: 700 30px/1.15 var(--og-serif); color: var(--og-ink); letter-spacing: -.01em; }
.og-how > p { margin: 8px 0 18px; font-size: 15px; line-height: 1.55; color: var(--og-text); }
.og-how ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.og-how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: start; }
.og-how li i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--og-lav-soft); color: var(--og-lav); font-size: 20px; }
.og-how li b { font: 700 15px var(--og-sans); color: var(--og-ink); }
.og-how li span { font-size: 14px; line-height: 1.5; color: var(--og-text); }
.og-how .og-pop-foot { margin-top: 22px; }