/* Business view at the end of the brain chapters. On its cue (board.js) the example runner's phone
   and the buying-mood meter step aside, and the viewer's own dashboard grows in, widget by widget:
   the conversion, the revenue it adds, the counts, the payment. Styled like a payments dashboard
   (white cards, navy, purple, green) so it reads as the business side, not the runner's app. */
.biz-board { display: none; }
html.is-presenting .biz-board {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-height) + 8px);
  /* Stops above the narrator panel (brain.js measures it). */
  bottom: var(--covered-bottom, 230px);
  left: var(--gutter);
  width: min(44%, 540px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  visibility: hidden;
  pointer-events: none;
  color: #0a2540;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.01em;
}
html[data-business] .biz-board { visibility: visible; }
html.is-presenting .funnel { transition: opacity .5s ease, transform .6s ease; }
html[data-business] .funnel { opacity: 0; transform: translateY(14px) scale(.97); }
/* Then the brain (and its sources) fade, and the board glides to the centre, over the narrator. */
html.is-presenting .biz-board { transition: left .9s cubic-bezier(.65, 0, .35, 1); }
html[data-business="centre"] .biz-board { left: calc(50% - min(22%, 270px)); }
html.is-presenting .brain-stage, html.is-presenting .sources { transition: opacity .6s ease; }
html[data-business="centre"] .brain-stage, html[data-business="centre"] .sources { opacity: 0; }

.biz-eyebrow { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-eyebrow { animation: biz-fade .5s ease .2s both; }
@keyframes biz-fade { from { opacity: 0; } to { opacity: 1; } }

/* Each widget grows open from its middle and settles into place, one after another (--d). */
.biz-card { padding: 12px 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(10, 37, 64, .1), 0 14px 34px rgba(0, 0, 0, .4); opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-card { animation: biz-grow .7s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
@keyframes biz-grow {
  from { opacity: 0; transform: translateY(18px) scale(.94); clip-path: inset(35% 0 35% 0 round 12px); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); }
}

.biz-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.biz-toast-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #635bff; }
.biz-toast-icon svg { width: 20px; height: 20px; }
.biz-toast p { display: grid; line-height: 1.3; }
.biz-toast b { font-size: 15px; font-weight: 700; }
.biz-toast small { font-size: 13px; color: #425466; }
.biz-toast-time { align-self: flex-start; margin-left: auto; font-size: 12px; color: #8792a2; }

.biz-label { font-size: 13px; color: #697386; }
.biz-label span { color: #8792a2; }
.biz-total { margin-top: 2px; display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* The added revenue: a green pill that pops in as the total counts up. */
.biz-up { padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: #006908; background: #d7f7c2; opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-up { animation: biz-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.4s both; }
@keyframes biz-pop { from { opacity: 0; transform: translateY(6px) scale(.8); } to { opacity: 1; transform: none; } }
.biz-chart { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.biz-line { fill: none; stroke: #635bff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.biz-area { opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-line { animation: biz-draw 1s ease-out 1.2s forwards; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-line-new { animation: biz-draw .45s ease-out 2.25s forwards; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-area { animation: biz-fade .8s ease 1.6s forwards; }
@keyframes biz-draw { to { stroke-dashoffset: 0; } }
.biz-dot { fill: #635bff; stroke: #fff; stroke-width: 2.5; opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-dot { animation: biz-fade .2s ease 2.65s forwards, biz-ping 1.4s ease-out 2.8s infinite; }
@keyframes biz-ping { 60% { stroke-width: 10; stroke: rgba(99, 91, 255, .2); } }
.biz-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: #8792a2; }

.biz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.biz-stats .biz-card { padding: 10px 16px; }
.biz-stats small { font-size: 12px; color: #697386; }
.biz-stats p { display: flex; align-items: baseline; gap: 8px; }
.biz-stats b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.biz-stats em { font-size: 13px; font-style: normal; font-weight: 700; color: #006908; opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-stats em { animation: biz-fade .3s ease 2.1s both; }

.biz-payments { padding-bottom: 6px; }
.biz-card-title { font-size: 13px; font-weight: 700; }
.biz-row { display: grid; grid-template-rows: 1fr; }
.biz-row > div { min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid #eef1f5; }
.biz-row:first-of-type > div { border-top: 0; }
.biz-row b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.biz-row small { margin-left: auto; font-size: 12px; color: #697386; }
.biz-badge { padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #006908; background: #d7f7c2; }
.biz-badge--new { color: #3f32d8; background: #e2e0ff; }
/* The new payment opens at the top of the list, with a brief highlight. */
.biz-row-new { grid-template-rows: 0fr; opacity: 0; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-row-new { animation: biz-row .5s cubic-bezier(.2, .8, .2, 1) 2.75s forwards; }
:is(html[data-business] .biz-board, .dash-story.is-active) .biz-row-new > div { animation: biz-flash 2s ease 3.1s; }
@keyframes biz-row { to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes biz-flash { 0%, 40% { background: #f1f0ff; } }

@media (prefers-reduced-motion: reduce) {
  html[data-business] .biz-board *, :is(html[data-business] .biz-board, .dash-story.is-active) .biz-eyebrow { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* Slide 4, the dashboard's big picture on its own: three cards, centred, growing in each time the
   slide plays, a little larger than the widgets at the end of the brain chapters. */
.dash-stage { display: none; }
html.is-presenting .dash-stage {
  position: absolute;
  top: var(--header-height);
  bottom: var(--covered-bottom, 230px);
  left: 50%;
  width: min(540px, calc(100% - 2 * var(--gutter)));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: #0a2540;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.01em;
}
.dash-stage .biz-card { padding: 16px 20px; }
.dash-stage .biz-total { font-size: 40px; }
.dash-stage .biz-stats b { font-size: 28px; }