/* ═══════════════════════════════════════════════════════════════════════
   ONBOARDING TOUR — scoped styles for onboarding.js

   Its own file, loaded after bill-app.css, so it inherits the paper theme's
   tokens and can be cache-versioned on its own. The old tour injected a
   stylesheet from JS in the pre-repaint dark palette (#0f172a cards on a
   cream app), which is exactly the kind of drift a separate, reviewable
   sheet makes visible.

   EVERY selector here is prefixed tbTour/#tbTour. Nothing in this file may
   match app markup: the tour drives the real board, so a stray rule would
   restyle the product it is demonstrating.

   Tokens are read from :root with literal fallbacks, because app.html is
   currently the only page that loads bill-app.css and the tour should still
   look deliberate if it is ever mounted somewhere that doesn't.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* The veil sits BELOW app modals (10000) so a real modal the tour opens —
     print preview, share, upgrade — reads normally instead of through a scrim.
     The tour's own chrome sits above everything, including the print overlay
     at 2147483000, because Pause and Skip must never be unreachable. */
  --tbtour-veil-z: 9000;
  --tbtour-chrome-z: 2147483600;
}

/* ── shared chrome surface: a ruled paper card ─────────────────────────── */
.tbTourCard{
  background:var(--panel, #f7f3e6);
  border:2px solid var(--rule-hard, #0b3b1e);
  border-radius:0;
  box-shadow:none;
  color:var(--text, #0b3b1e);
  font-family:"Archivo","Archivo Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 92;
}

/* Small condensed caps — the bill's label voice. Used for the beat counter,
   the PRO chip and every button in the control bar. */
.tbTourCaps{
  font-variation-settings:"wdth" 78;
  font-weight:700;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ── the veil + spotlight ──────────────────────────────────────────────── */
/* One element does both jobs: the box is the hole, and an enormous spread
   shadow paints the darkness around it. Cheaper and sharper than four rects,
   and it moves as a single box change. */
#tbTourSpot{
  position:fixed;
  z-index:var(--tbtour-veil-z);
  pointer-events:none;
  border:2px solid var(--canary, #ffd100);
  border-radius:0;
  box-shadow:0 0 0 9999px rgba(11,59,30,.62);
  transition:top .42s cubic-bezier(.4,0,.2,1),
             left .42s cubic-bezier(.4,0,.2,1),
             width .42s cubic-bezier(.4,0,.2,1),
             height .42s cubic-bezier(.4,0,.2,1);
}
/* No target for this beat (a full-screen modal is doing the talking): keep
   the scrim, drop the ring, so nothing appears to be highlighted at random. */
#tbTourSpot.tbTourSpot--none{
  border-color:transparent;
  top:50%; left:50%; width:0; height:0;
}
/* While the veil is up the board underneath must not accept input — the tour
   is driving it, and a stray click mid-beat desynchronises the demo. */
body.tbTourRunning #main-content,
body.tbTourRunning .topNav{
  pointer-events:none;
}

/* ── the caption ───────────────────────────────────────────────────────── */
#tbTourCaption{
  position:fixed;
  z-index:var(--tbtour-chrome-z);
  width:320px;
  max-width:calc(100vw - 32px);
  padding:0;
  transition:opacity .18s ease;
}
#tbTourCaption.tbTourHidden{ opacity:0; pointer-events:none; }

.tbTourCaptionHead{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-bottom:2px solid var(--rule-hard, #0b3b1e);
  background:var(--panel-3, #eae3ce);
}
.tbTourCount{ color:var(--muted-2, rgba(11,59,30,.70)); }
.tbTourSpacer{ flex:1; }

/* The Pro badge. Canary is the theme's "the one active thing" colour, which
   is precisely what a paid feature is on a free board. */
.tbTourPro{
  background:var(--canary, #ffd100);
  color:var(--ink, #0b3b1e);
  border:2px solid var(--rule-hard, #0b3b1e);
  padding:1px 6px;
}

.tbTourCaptionBody{ padding:14px 14px 15px; }
.tbTourTitle{
  font-size:17px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 7px;
  font-variation-settings:"wdth" 88;
}
.tbTourText{
  font-size:13.5px;
  line-height:1.55;
  margin:0;
  color:var(--muted-2, rgba(11,59,30,.70));
}

/* Notch pointing at the spotlight. Solid ink, no border to mitre — a 2px
   outline on a rotated square never lines up with the card's own rule. */
.tbTourNotch{
  position:absolute;
  width:12px; height:12px;
  background:var(--rule-hard, #0b3b1e);
}
.tbTourNotch--left  { left:-8px;   top:26px;  clip-path:polygon(100% 0, 0 50%, 100% 100%); }
.tbTourNotch--right { right:-8px;  top:26px;  clip-path:polygon(0 0, 100% 50%, 0 100%); }
.tbTourNotch--top   { top:-8px;    left:26px; clip-path:polygon(0 100%, 50% 0, 100% 100%); }
.tbTourNotch--bottom{ bottom:-8px; left:26px; clip-path:polygon(0 0, 50% 100%, 100% 0); }

/* ── the control bar ───────────────────────────────────────────────────── */
#tbTourBar{
  position:fixed;
  z-index:var(--tbtour-chrome-z);
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:stretch;
}
#tbTourBar button{
  font-family:inherit;
  background:var(--panel, #f7f3e6);
  color:var(--text, #0b3b1e);
  border:0;
  border-right:2px solid var(--rule-hard, #0b3b1e);
  padding:9px 14px;
  cursor:pointer;
  line-height:1;
}
#tbTourBar button:last-child{ border-right:0; }
#tbTourBar button:hover:not(:disabled){ background:var(--canary, #ffd100); }
#tbTourBar button:disabled{ opacity:.38; cursor:default; }
#tbTourBar button:focus-visible{
  outline:2px solid var(--blue, #0057b8);
  outline-offset:-4px;
}
#tbTourProgress{
  display:flex;
  align-items:center;
  padding:0 12px;
  border-right:2px solid var(--rule-hard, #0b3b1e);
  color:var(--muted-2, rgba(11,59,30,.70));
  white-space:nowrap;
}
#tbTourSkip{ background:var(--panel-3, #eae3ce) !important; }

/* ── centred cards: invitation, finish, confirm ────────────────────────── */
.tbTourScrim{
  position:fixed;
  inset:0;
  z-index:var(--tbtour-chrome-z);
  background:rgba(11,59,30,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.tbTourDialog{
  width:460px;
  max-width:100%;
  max-height:calc(100vh - 48px);
  overflow:auto;
}
.tbTourDialogHead{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  background:var(--canary, #ffd100);
  border-bottom:2px solid var(--rule-hard, #0b3b1e);
  color:var(--ink, #0b3b1e);
}
.tbTourDialogBody{ padding:20px 22px 22px; }
.tbTourDialogTitle{
  font-size:24px;
  font-weight:800;
  line-height:1.12;
  margin:0 0 9px;
  font-variation-settings:"wdth" 86;
}
.tbTourDialogText{
  font-size:14px;
  line-height:1.6;
  margin:0 0 18px;
  color:var(--muted-2, rgba(11,59,30,.70));
}
.tbTourDialogText:last-child{ margin-bottom:0; }

.tbTourActions{ display:flex; gap:10px; flex-wrap:wrap; }
.tbTourBtn{
  font-family:inherit;
  font-variation-settings:"wdth" 82;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:11px 18px;
  border:2px solid var(--rule-hard, #0b3b1e);
  background:var(--panel, #f7f3e6);
  color:var(--text, #0b3b1e);
  cursor:pointer;
  border-radius:0;
}
.tbTourBtn:hover{ background:var(--panel-3, #eae3ce); }
.tbTourBtn:focus-visible{ outline:2px solid var(--blue, #0057b8); outline-offset:2px; }
.tbTourBtn--primary{ background:var(--canary, #ffd100); }
.tbTourBtn--primary:hover{ background:#ffdc3d; }

/* ── the chapter menu on the finish card ───────────────────────────────── */
.tbTourChapters{
  display:flex;
  flex-direction:column;
  border:2px solid var(--rule-hard, #0b3b1e);
  margin:0 0 18px;
}
.tbTourChapter{
  display:block;
  width:100%;
  text-align:left;
  font-family:inherit;
  background:var(--panel, #f7f3e6);
  color:var(--text, #0b3b1e);
  border:0;
  border-bottom:2px solid var(--rule-hard, #0b3b1e);
  padding:11px 14px;
  cursor:pointer;
}
.tbTourChapter:last-child{ border-bottom:0; }
.tbTourChapter:hover{ background:var(--canary, #ffd100); }
.tbTourChapter:focus-visible{ outline:2px solid var(--blue, #0057b8); outline-offset:-4px; }
.tbTourChapterName{
  display:block;
  font-weight:800;
  font-size:14px;
  font-variation-settings:"wdth" 88;
}
.tbTourChapterBlurb{
  display:block;
  font-size:12.5px;
  line-height:1.45;
  margin-top:3px;
  color:var(--muted-2, rgba(11,59,30,.70));
}
.tbTourChapter[data-done="1"] .tbTourChapterName::after{
  content:" ✓";
  color:var(--green, #2e7d32);
}

/* Plain links out, at the foot of the finish card. Deliberately links and
   not buttons: leaving the board is the user's decision, not a tour step. */
.tbTourLinks{
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  margin-top:16px;
  padding-top:14px;
  border-top:2px solid var(--rule, rgba(11,59,30,.26));
  font-size:12.5px;
}
.tbTourLinks a{ color:var(--blue, #0057b8); text-decoration:underline; }

/* ── the replay button in the top nav ──────────────────────────────────── */
#tbTourLaunch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  font-variation-settings:"wdth" 80;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 10px;
  border:2px solid var(--rule-hard, #0b3b1e);
  background:var(--panel, #f7f3e6);
  color:var(--text, #0b3b1e);
  cursor:pointer;
  border-radius:0;
}
#tbTourLaunch:hover{ background:var(--canary, #ffd100); }
#tbTourLaunch:focus-visible{ outline:2px solid var(--blue, #0057b8); outline-offset:2px; }

/* Desktop only, for now: the tour drives the sidebar and the right-hand
   panel directly, and below 900px both are slide-in mobile panels behind a
   tab bar — a second choreography, not a narrower one. Until that exists the
   button hides rather than offering a tour that cannot run. onboarding.js
   gates on the same breakpoint; keep the two in step. */
@media (max-width: 900px){
  #tbTourLaunch{ display:none; }
}

/* ── reduced motion ────────────────────────────────────────────────────── */
/* The spotlight is the only thing here that moves on its own; the beats
   themselves are snapped to their end state in JS (see SNAP). */
@media (prefers-reduced-motion: reduce){
  #tbTourSpot{ transition:none; }
  #tbTourCaption{ transition:none; }
}