/* Vanish · first-run onboarding: coach marks (V2 from onboarding-lab/)
   Four popovers anchored to the real controls. Uses the dashboard's own
   tokens (style.css :root) and its .btn / .icon-btn classes, so it reads as
   part of the app, not a layer on top. */

.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.ob-i { flex: none; display: block; }
.ob-layer [hidden], .ob-layer[hidden] { display: none !important; }

/* ---- help item ----------------------------------------------------------- */
.top-actions .ob-help { margin-right: 2px; }
.ob-help-foot {
  display: none; align-items: center; gap: 5px; height: 32px; padding: 0;
  font: inherit; font-size: var(--fs-footnote); color: var(--label); font-weight: var(--fw-medium);
}
@media (max-width: 640px) {
  .top-actions .ob-help { display: none; }
  .ledger .ob-help-foot { display: inline-flex; }
}

/* ---- layer + spotlight ------------------------------------------------- */
.ob-layer { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.ob-layer > * { pointer-events: auto; }
.ob-layer .ob-spot { pointer-events: none; }
.ob-spot {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition:
    left var(--dur-slide) var(--ease-slide), top var(--dur-slide) var(--ease-slide),
    width var(--dur-slide) var(--ease-slide), height var(--dur-slide) var(--ease-slide),
    border-radius var(--dur-slide) var(--ease-slide), opacity 260ms var(--ease-out);
}
.ob-layer.on .ob-spot { opacity: 1; }

/* ---- shared type -------------------------------------------------------- */
.ob-title { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--label); }
.ob-body { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.45; color: var(--label-2); text-wrap: pretty; }
.ob-skip {
  font: inherit; font-size: var(--fs-callout); color: var(--label-2); padding: 4px 0; border-radius: 4px;
}
.ob-skip:hover { color: var(--label); }

/* page control dots: the current one stretches into a capsule */
.ob-dots { display: inline-flex; gap: 5px; align-items: center; }
.ob-dots i {
  width: 6px; height: 6px; border-radius: 3px; background: var(--fill-thick);
  transition: width var(--dur-3) var(--ease-slide), background var(--dur-2) var(--ease-out);
}
.ob-dots i.done { background: color-mix(in srgb, var(--label) 40%, transparent); }
.ob-dots i.on { width: 18px; background: var(--label); }

/* ---- popover ---------------------------------------------------------------- */
.ob-pop {
  position: fixed; width: 304px; border-radius: var(--r-3); background: var(--bg);
  box-shadow: var(--shadow); z-index: 1;
  transition: left var(--dur-slide) var(--ease-slide), top var(--dur-slide) var(--ease-slide);
}
.ob-pop.enter .ob-ill, .ob-pop.enter .ob-pop-text { animation: ob-fade 260ms var(--ease-out); }
.ob-arrow {
  position: absolute; width: 14px; height: 14px; background: var(--bg); z-index: -1;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  transform: rotate(45deg); border-radius: 2px;
}
.ob-pop[data-side="right"] .ob-arrow { left: -7px; top: calc(var(--ob-ay) - 7px); }
.ob-pop[data-side="left"] .ob-arrow { right: -7px; top: calc(var(--ob-ay) - 7px); }
.ob-pop[data-side="bottom"] .ob-arrow { top: -7px; left: calc(var(--ob-ax) - 7px); }
.ob-pop[data-side="top"] .ob-arrow { bottom: -7px; left: calc(var(--ob-ax) - 7px); }
.ob-ill {
  height: 104px; margin: 6px 6px 0; border-radius: var(--r-2); background: var(--bg-2); overflow: hidden;
  display: grid; place-items: center;
}
.ob-pop-text { padding: 12px 16px 0; }
.ob-pop-foot { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 16px; }
.ob-pop-foot .ob-dots { margin-right: auto; margin-left: 4px; }
.ob-pop-nav { display: flex; gap: 6px; }
.ob-pop-nav .btn { min-width: 64px; }

/* illustrations (each loops; reduced motion shows the end state) */
.il { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.il img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 1 · open: the file slides in, the picture appears */
.il-open { grid-template-columns: auto auto; gap: 14px; justify-content: center; }
.il-file {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px;
  background: var(--bg); box-shadow: var(--knob); font-size: var(--fs-footnote); color: var(--label);
  animation: il-file 3.2s var(--ease-slide) infinite;
}
.il-frame { width: 128px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--fill); box-shadow: inset 0 0 0 1px var(--separator); }
.il-frame img { animation: il-appear 3.2s var(--ease-out) infinite; }
/* 2 · box: the dashed box glides onto the stamp and the stamp goes */
.il-shot { position: relative; width: 184px; height: 92px; border-radius: 6px; overflow: hidden; }
.il-shot img { position: absolute; inset: 0; }
.il-after { animation: il-patch 3.6s var(--ease-out) infinite; }
.il-dash {
  position: absolute; left: var(--tx); top: var(--ty); border: 1px dashed #fff; box-shadow: var(--overlay-ring); border-radius: 2px;
  animation: il-dash 3.6s var(--ease-slide) infinite;
}
/* 3 · fill: four real crops; the ring steps through them */
.il-tiles { position: relative; display: grid; grid-template-columns: repeat(4, 56px); gap: 8px; }
.il-tiles span { display: block; width: 56px; height: 38px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.il-ring {
  position: absolute; left: -3px; top: -3px; width: 62px; height: 44px; border-radius: 8px;
  box-shadow: 0 0 0 1.5px var(--label);
  animation: il-ring 4s var(--ease-slide) infinite;
}
/* 4 · export: a bar fills, then "Saved" */
.il-win {
  position: relative; width: 208px; padding: 12px 14px; border-radius: 8px; background: var(--bg); box-shadow: var(--knob);
  display: grid; gap: 8px;
}
.il-name { font-size: var(--fs-footnote); font-weight: var(--fw-medium); color: var(--label); }
.il-bar { height: 4px; border-radius: 2px; background: var(--fill-thick); overflow: hidden; }
.il-bar i { display: block; height: 100%; background: var(--label); transform-origin: left; animation: il-bar 3.2s var(--ease-out) infinite; }
.il-done { display: flex; align-items: center; gap: 5px; font-size: var(--fs-footnote); color: var(--label-2); animation: il-done 3.2s var(--ease-out) infinite; }

/* ---- focus: the dashboard's ring ------------------------------------------ */
.ob-pop :focus-visible,
.ob-help-foot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- keyframes ----------------------------------------------------------- */
@keyframes ob-fade { from { opacity: 0; } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes ob-sink { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes ob-pop-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes ob-breathe { from { outline-offset: 0; opacity: 1; } to { outline-offset: 4px; opacity: 0.7; } }
@keyframes il-file { 0% { transform: translateX(-24px); opacity: 0; } 18%, 100% { transform: none; opacity: 1; } }
@keyframes il-appear { 0%, 28% { opacity: 0; transform: scale(1.06); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes il-dash {
  0% { left: calc(var(--tx) * 0.4); top: calc(var(--ty) * 0.3); opacity: 0; }
  10% { left: calc(var(--tx) * 0.4); top: calc(var(--ty) * 0.3); opacity: 1; }
  45%, 100% { left: var(--tx); top: var(--ty); opacity: 1; }
}
@keyframes il-patch {
  0%, 52% { clip-path: inset(var(--t) calc(100% - var(--l)) var(--b) var(--l)); }
  72%, 100% { clip-path: inset(var(--t) var(--r) var(--b) var(--l)); }
}
@keyframes il-ring {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(64px); }
  50%, 70% { transform: translateX(128px); }
  75%, 95% { transform: translateX(192px); }
  100% { transform: translateX(0); }
}
@keyframes il-bar { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes il-done { 0%, 60% { opacity: 0; transform: translateY(3px); } 70%, 100% { opacity: 1; transform: none; } }

/* ---- phone ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .ob-skip { padding: 10px 0; }
  .ob-pop { width: calc(100vw - 24px); }
  .ob-pop-nav .btn { height: 36px; }
}

/* ---- reduced motion: no loops, no glides; end states only ------------------ */
@media (prefers-reduced-motion: reduce) {
  .ob-spot, .ob-pop, .ob-dots i { transition: none !important; }
  .ob-pop.enter .ob-ill, .ob-pop.enter .ob-pop-text,
  .il-file, .il-frame img, .il-dash, .il-after, .il-ring, .il-bar i, .il-done { animation: none !important; }
  .il-after { clip-path: inset(var(--t) var(--r) var(--b) var(--l)); }
  .il-ring { transform: none; }
}