/* /tour: the frame around the sample board. The board itself is board-kit.css,
   untouched; this file only adds the "what this is" note and the bottom bar. */
.tourtag { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--butter); color: var(--butter-ink); font-size: var(--f-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.tournote { position: relative; margin: 10px 0 18px; padding: 18px 18px 16px; background: var(--card); border-radius: 20px; box-shadow: var(--sh); color: var(--ink); }
.tournote::before { content: ""; position: absolute; top: -9px; left: 50%; width: 84px; height: 20px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(246, 226, 166, 0.85); box-shadow: 0 1px 0 rgba(22,21,15,0.06); }
.tournote h2 { margin: 0; font-size: var(--f-lg); font-weight: 800; line-height: 1.3; }
.tournote p { margin: 6px 0 0; font-size: var(--f-md); font-weight: 600; color: var(--muted); }

.tourbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--card); box-shadow: 0 -1px 0 var(--line), 0 -12px 28px -18px rgba(22,21,15,0.35); }
.tourbar .in { max-width: calc(520px - 2 * var(--gutter)); margin: 0 auto; }
.tourbar .cta { margin-top: 0; }
.tourbar .linkb { margin-top: 4px; font-size: var(--f-sm); color: var(--muted); }
body.tour .wrap { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
/* the board's sign-out lives in /b only */
body.tour #signout { display: none !important; }

/* moving between the homepage and here: a soft cross-fade (both pages opt in) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

/* first paint only: the board settles in, card by card. Re-reads swap in place. */
@keyframes tourIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.tour.enter #main > * { animation: tourIn 0.42s cubic-bezier(.2,.9,.3,1) both; }
body.tour.enter #main > *:nth-child(2) { animation-delay: 0.05s; }
body.tour.enter #main > *:nth-child(3) { animation-delay: 0.1s; }
body.tour.enter #main > *:nth-child(4) { animation-delay: 0.15s; }
body.tour.enter #main > *:nth-child(n+5) { animation-delay: 0.2s; }
.tourbar { animation: tourBar 0.36s 0.15s cubic-bezier(.2,.9,.3,1) both; }
@keyframes tourBar { from { transform: translateY(100%); } to { transform: none; } }
.tourbar .btn.dark:active, .tourbar .linkb:active { transform: scale(0.98); }
.tourbar .btn { transition: transform 0.12s ease; }
@media (prefers-reduced-motion: reduce) {
  body.tour.enter #main > *, .tourbar { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
body.tour.enter #main[aria-busy="true"] > * { animation: none; }

/* the sample's calendar: a picture of what lands in your phone's calendar */
.calpic { margin-top: 16px; padding: 14px 12px 12px; background: var(--card); border-radius: 20px; box-shadow: var(--sh); }
.calt { padding: 0 4px 8px; font-size: var(--f-lg); font-weight: 800; letter-spacing: -0.01em; }
.calg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; text-align: center; }
.calg .cw { font-size: var(--f-xs); font-weight: 800; color: var(--dim); padding-bottom: 4px; }
.calg .cd { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; padding-top: 4px; }
.calg .cd b { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; font-size: var(--f-md); font-weight: 800; }
.calg .cd.past b { color: var(--dim); font-weight: 700; }
.calg .cd.today b { background: var(--ink); color: #FFFFFF; }
.calg .cd i, .caldot { display: block; width: 7px; height: 7px; border-radius: 999px; }
.calg .cd i.turn, .caldot.turn { background: var(--butter-ink); }
.calg .cd i.rent, .caldot.rent { background: var(--pos); }
.caldot { flex-shrink: 0; width: 10px; height: 10px; }