/**
 * First-run help: the hint bubbles on the way in, and the tutorial that plays
 * on the writing surface.
 *
 * Kept in its own file rather than added to styles.css. Every page from the
 * sign-in to the canvas loads this and nothing else of it, and none of these
 * rules can reach the app's own components — a first-run overlay that shifted
 * the layout underneath it would be a strange thing to greet somebody with.
 *
 * Own custom properties on purpose: these run on five pages with three
 * different palettes between them, and a hint bubble should look the same on
 * all of them.
 */

.ob-root {
  --ob-navy: #14235c;
  --ob-ink: #23325f;
  --ob-muted: #5a6a94;
  --ob-blue: #1e5fd8;
  --ob-teal: #0f8a72;
  --ob-candy: #e0367a;
  --ob-amber: #f59e0b;
  --ob-cream: #fffaf0;
  --ob-edge: #ffe9bc;

  position: fixed;
  inset: 0;
  z-index: 9000;
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  color: var(--ob-ink);
}

/* ============================ hint bubbles ============================ */

/* The dimmer is the spotlight. A ring element carries an enormous box-shadow
   spread, so the "hole" is simply the part the shadow does not cover — one
   element instead of four panels that never quite meet at the corners. */
.ob-spot {
  position: absolute;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(10, 22, 54, .62);
  outline: 3px solid #ffd66b;
  outline-offset: 3px;
  transition: all .32s cubic-bezier(.4, 1.3, .5, 1);
  pointer-events: none;
}

/* No target on the page: dim everything and centre the bubble instead of
   pointing at a corner. */
.ob-root.ob-nospot .ob-spot {
  inset: 50% auto auto 50%;
  width: 0; height: 0;
  outline: none;
}

.ob-bubble {
  position: absolute;
  width: min(340px, calc(100vw - 32px));
  background: var(--ob-cream);
  border: 2px solid var(--ob-edge);
  border-radius: 20px;
  padding: 16px 18px 14px;
  box-shadow: 0 4px 0 rgba(180, 130, 60, .3), 0 18px 44px rgba(10, 30, 60, .38);
  transition: top .32s cubic-bezier(.4, 1.3, .5, 1), left .32s cubic-bezier(.4, 1.3, .5, 1);
}

/* The nub's offset is set by the script, so a bubble pushed sideways by the
   window edge still points at the middle of what it is talking about. */
.ob-bubble::after {
  content: '';
  position: absolute;
  left: var(--ob-nub-left, 24px);
  width: 16px; height: 16px;
  background: var(--ob-cream);
  border: 2px solid var(--ob-edge);
  transform: rotate(45deg);
}
.ob-bubble.ob-below::after { top: -10px; border-right: none; border-bottom: none; }
.ob-bubble.ob-above::after { bottom: -10px; border-left: none; border-top: none; }
.ob-bubble.ob-nub-none::after { display: none; }

.ob-step {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ob-candy);
  margin-bottom: 4px;
}
.ob-title { font-size: 19px; font-weight: 800; line-height: 1.15; }
.ob-text {
  margin-top: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ob-muted);
}
.ob-text b { font-weight: 800; color: var(--ob-ink); }

.ob-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.ob-dots { display: flex; gap: 5px; margin-right: auto; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2d6bb; }
.ob-dot.on { background: var(--ob-candy); }

.ob-btn {
  font: inherit;
  font-size: 14px; font-weight: 800;
  border: none; border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  background: var(--ob-candy); color: #fff;
  box-shadow: 0 4px 0 #b0245c;
  transition: transform .08s ease;
}
.ob-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b0245c; }

.ob-skip {
  font: inherit;
  font-size: 13px; font-weight: 700;
  background: none; border: none; cursor: pointer;
  color: var(--ob-muted);
  text-decoration: underline;
  padding: 6px 2px;
}
.ob-skip:hover { color: var(--ob-ink); }

/* ============================ the tutorial ============================ */

.ob-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 22, 54, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ob-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: var(--ob-cream);
  border: 3px solid var(--ob-edge);
  border-radius: 28px;
  padding: 16px 18px 18px;
  box-shadow: 0 6px 0 rgba(180, 130, 60, .3), 0 26px 60px rgba(10, 30, 60, .45);
  text-align: center;
}

.ob-panel-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.ob-panel-title { font-size: 18px; font-weight: 800; }
.ob-close {
  margin-left: auto;
  font: inherit; font-size: 16px; font-weight: 800;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--ob-edge); background: #fff; color: var(--ob-muted);
  cursor: pointer; line-height: 1;
}
.ob-close:hover { color: var(--ob-ink); }

.ob-stage {
  position: relative;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--ob-edge);
}
.ob-stage canvas { display: block; width: 100%; height: auto; }

.ob-caption {
  min-height: 52px;
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ob-caption span {
  font-size: 17px; font-weight: 800; line-height: 1.25;
  color: var(--ob-ink);
}
.ob-caption span b { color: var(--ob-candy); }

.ob-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ob-controls .ob-dots { margin: 0 auto 0 0; }
.ob-btn.ob-ghost {
  background: #fff; color: var(--ob-ink);
  border: 2px solid var(--ob-edge);
  box-shadow: 0 3px 0 rgba(180, 130, 60, .25);
}
.ob-btn.ob-ghost:active { box-shadow: 0 1px 0 rgba(180, 130, 60, .25); }

/* The button that brings the tutorial back. Sits in the page's own toolbar, so
   it borrows the size of the buttons beside it rather than setting its own. */
.ob-help-btn { cursor: pointer; }

/* A written list of the same steps, for a device that has asked not to be
   animated. The animation is the explanation, so without it there has to be
   something else to read. */
.ob-static { text-align: left; margin: 4px 2px 0; }
.ob-static li {
  list-style: none;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ob-ink);
}
.ob-static li b { font-weight: 800; }
.ob-static .n {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ob-teal); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ob-spot, .ob-bubble { transition: none; }
}