/* Analytics + AI insights: one month, read left to right.
   The month (where it went) → the pattern (one category, opened up) → what it means.
   Static by default; one short entrance when enhanced. No pinning. */
.insights-story {
  padding: var(--section-y, 140px) 0;
  background: var(--surface-page, #1f1f1f);
  scroll-margin-top: 80px;
}
.insights-story__inner { width: min(var(--content, 1200px), calc(100% - var(--gutter, 56px) * 2)); margin-inline: auto; }

.insights-story__head { max-width: 640px; margin-bottom: clamp(56px, 6vw, 88px); }
.insights-story__eyebrow { margin: 0 0 18px; color: var(--ink-3, #8c8c8c); font-size: var(--type-label, 14px); font-weight: 500; letter-spacing: -.01em; }
.insights-story h2 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--type-h2, 64px);
  font-weight: var(--type-h2-weight, 550);
  line-height: var(--type-h2-leading, 1.04);
  letter-spacing: var(--type-h2-track, -.045em);
}
.insights-story__intro { max-width: 36ch; margin: 22px 0 0; color: var(--ink-2, #bdbdbd); font-size: var(--type-lede, 17px); line-height: 1.55; text-wrap: pretty; }

/* ---- study grid ---------------------------------------------------------- */
.insights-story__study {
  --head: 128px;      /* beat label + total */
  --band: 440px;      /* height of the month column */
  --pt: 140px;        /* pattern panel offset inside the band */
  --ph: 300px;        /* pattern panel height */
  --zoom: 88px;
  display: grid;
  grid-template-columns: auto var(--zoom) minmax(0, 1fr) 48px minmax(0, 1.12fr);
  grid-template-areas: "month . pattern . insight";
  align-items: start;
}

.insights-story__beat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--ink-3, #8c8c8c);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.insights-story__beat span { color: var(--ink-4, #6e6e6e); font-weight: 400; }

/* the month */
.insights-story__month { grid-area: month; width: 300px; margin: 0; }
.insights-story__total { height: calc(var(--head) - 31px); }
.insights-story__total p { margin: 0; }
.insights-story__figure { display: block; color: var(--ink-1, #fff); font-size: 44px; font-weight: 550; line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.insights-story__period { display: block; margin-top: 4px; color: var(--ink-3, #8c8c8c); font-size: 14px; }
.insights-story__change { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px !important; color: #ff8a80; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.insights-story__change span { color: var(--ink-3, #8c8c8c); font-weight: 400; }

.insights-story__band { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 18px; height: var(--band); }
.insights-story__legend,
.insights-story__bar { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.insights-story__legend li,
.insights-story__bar span { flex: var(--share) 1 0; min-height: 0; }
.insights-story__legend li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.insights-story__legend span { color: var(--ink-3, #8c8c8c); }
.insights-story__legend strong { color: var(--ink-2, #bdbdbd) !important; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.insights-story__legend small { width: 30px; color: var(--ink-4, #6e6e6e); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.insights-story__legend .is-focus span,
.insights-story__legend .is-focus strong { color: var(--ink-1, #fff) !important; }
.insights-story__legend .is-focus small { color: var(--accent, #d6ff63); }

.insights-story__bar span { display: block; border-radius: 3px; background: #3a3a3a; }
.insights-story__bar span:first-child { border-radius: 14px 14px 3px 3px; }
.insights-story__bar span:last-child { border-radius: 3px 3px 14px 14px; }
.insights-story__bar [data-category="grocery"] { background: #4a4a4a; }
.insights-story__bar [data-category="shopping"] { background: #414141; }
.insights-story__bar [data-category="transport"] { background: #383838; }
.insights-story__bar [data-category="other"] { background: #323232; }
.insights-story__bar .is-focus { background: var(--accent, #d6ff63); }

/* the pattern: the Cafe segment opens into its two merchants */
.insights-story__pattern {
  grid-area: pattern;
  position: relative;
  display: flex;
  margin-inline: 0;
  flex-direction: column;
  height: var(--ph);
  margin-top: calc(var(--head) + var(--pt));
  padding: 26px 28px;
  border: 1px solid var(--hairline, #ffffff17);
  border-radius: var(--radius-card, 20px);
  background: var(--surface-raised, #262626);
}
.insights-story__pattern::before {
  content: '';
  position: absolute;
  top: calc(-1px - var(--pt));
  right: calc(100% + 1px);
  width: var(--zoom);
  height: var(--band);
  background: linear-gradient(90deg, rgba(214,255,99,.2), rgba(214,255,99,.05));
  clip-path: polygon(0 calc(var(--band) * .5844 + 2px), 100% calc(var(--pt) + 1px), 100% calc(var(--pt) + var(--ph) + 1px), 0 calc(var(--band) * .7337 - 1px));
  pointer-events: none;
}
.insights-story__merchants { display: grid; gap: 24px; flex: 1; align-content: end; margin: 0; padding: 0; list-style: none; }
.insights-story__merchant { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-1, #fff); font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.insights-story__merchant strong { color: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
.insights-story__visits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 13px; margin: 12px 0 9px; }
.insights-story__visits i { width: var(--dot); height: var(--dot); border-radius: 50%; background: #5c5c5c; }
.insights-story__merchants .is-lead .insights-story__visits i { background: var(--accent, #d6ff63); }
.insights-story__merchants p { margin: 0; color: var(--ink-3, #8c8c8c); font-size: 13px; font-variant-numeric: tabular-nums; }

/* what it means: Monetor AI reasons over the pattern, then writes the finding */
.insights-story__insight { grid-area: insight; margin-top: calc(var(--head) + var(--pt) - 31px); }

@property --ai-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ai-panel {
  position: relative;
  isolation: isolate;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(214,255,99,.07), transparent 55%),
    var(--surface-raised, #262626);
  box-shadow: inset 0 0 0 1px var(--hairline-strong, #ffffff29);
}
/* a lime light that travels around the edge while Monetor AI is thinking */
.ai-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--ai-angle), transparent 0 62%, rgba(214,255,99,.9) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.ai-panel[data-state="thinking"]::before,
.ai-panel[data-state="writing"]::before { opacity: 1; animation: ai-orbit 2.4s linear infinite; }

.ai-panel__head { display: flex; align-items: center; gap: 12px; }
.ai-panel__orb { display: block; flex: none; width: 64px; height: 64px; margin: -10px -6px -10px -10px; }
.ai-panel__name { margin: 0; color: var(--ink-1, #fff); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ai-panel__status { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; color: var(--ink-3, #8c8c8c); font-size: 13px; }
.ai-panel[data-state="thinking"] .ai-panel__status span,
.ai-panel[data-state="writing"] .ai-panel__status span { color: transparent; background: linear-gradient(90deg, #8c8c8c 0%, #f2f2f2 50%, #8c8c8c 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: ai-shimmer 1.4s linear infinite; }

.ai-panel__steps { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ai-panel__steps li { position: relative; padding-left: 28px; color: var(--ink-3, #8c8c8c); font-size: 14px; line-height: 1.4; transition: color 240ms ease, opacity 240ms ease; }
/* done (the default, static state): a lime check */
.ai-panel__steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #d6ff63) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ai-panel__steps li[data-step-state="pending"] { opacity: .35; }
.ai-panel__steps li[data-step-state="pending"]::before { background: none; box-shadow: inset 0 0 0 1.5px #5c5c5c; }
.ai-panel__steps li[data-step-state="active"] { color: transparent; background: linear-gradient(90deg, #8c8c8c 0%, #ffffff 50%, #8c8c8c 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: ai-shimmer 1.2s linear infinite; }
.ai-panel__steps li[data-step-state="active"]::before { background: none; border: 1.5px solid #4a4a4a; border-top-color: var(--accent, #d6ff63); box-sizing: border-box; animation: ai-spin .8s linear infinite; }

.ai-panel__answer { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline, #ffffff17); }
.ai-panel__answer h3 { min-height: 1.2em; margin: 0; color: var(--ink-1, #fff); font-size: 22px; font-weight: 550; line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.ai-panel__answer p { min-height: 1.5em; margin: 10px 0 0; color: var(--ink-2, #bdbdbd); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.ai-panel [data-ai-type].is-typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--accent, #d6ff63); vertical-align: -.12em; animation: ai-caret .9s steps(1) infinite; }
.ai-panel__disclaimer { margin: 18px 0 0; color: var(--ink-4, #6e6e6e); font-size: 12px; line-height: 1.45; }
.ai-panel .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes ai-orbit { to { --ai-angle: 360deg; } }
@keyframes ai-shimmer { to { background-position: -200% 0; } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-caret { 50% { opacity: 0; } }

/* ---- entrance (only when JS enhances; static HTML is the finished state) - */
.insights-story[data-enhanced] .insights-story__bar span { transform: scaleY(0); transform-origin: top; background: #8a9d47; }
.insights-story[data-enhanced] .insights-story__legend,
.insights-story[data-enhanced] .insights-story__total { opacity: 0; }
.insights-story[data-enhanced] .insights-story__pattern::before { opacity: 0; }
.insights-story[data-enhanced] .insights-story__pattern,
.insights-story[data-enhanced] .insights-story__insight { opacity: 0; transform: translateY(14px); }
.insights-story[data-enhanced] .insights-story__visits i { transform: scale(0); }

.insights-story.is-visible .insights-story__total,
.insights-story.is-visible .insights-story__legend { opacity: 1; transition: opacity 500ms ease; }
.insights-story.is-visible .insights-story__legend { transition-delay: 350ms; }
.insights-story.is-visible .insights-story__bar span {
  transform: none;
  transition: transform 560ms cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 60ms), background 420ms ease 780ms;
}
.insights-story.is-visible .insights-story__bar [data-category="grocery"] { background: #4a4a4a; }
.insights-story.is-visible .insights-story__bar [data-category="shopping"] { background: #414141; }
.insights-story.is-visible .insights-story__bar [data-category="transport"] { background: #383838; }
.insights-story.is-visible .insights-story__bar [data-category="other"] { background: #323232; }
.insights-story.is-visible .insights-story__bar .is-focus { background: var(--accent, #d6ff63); }
.insights-story__bar span:nth-child(2) { --i: 1; }
.insights-story__bar span:nth-child(3) { --i: 2; }
.insights-story__bar span:nth-child(4) { --i: 3; }
.insights-story__bar span:nth-child(5) { --i: 4; }
.insights-story.is-visible .insights-story__pattern::before { opacity: 1; transition: opacity 420ms ease 950ms; }
.insights-story.is-visible .insights-story__pattern { opacity: 1; transform: none; transition: opacity 460ms ease 950ms, transform 560ms cubic-bezier(.2,.7,.2,1) 950ms; }
.insights-story.is-visible .insights-story__visits i { transform: none; transition: transform 300ms cubic-bezier(.3,1.4,.5,1) calc(1150ms + var(--d, 0) * 28ms); }
.insights-story.is-visible .insights-story__insight { opacity: 1; transform: none; transition: opacity 520ms ease 1450ms, transform 620ms cubic-bezier(.2,.7,.2,1) 1450ms; }
.insights-story__visits i:nth-child(2) { --d: 1; } .insights-story__visits i:nth-child(3) { --d: 2; }
.insights-story__visits i:nth-child(4) { --d: 3; } .insights-story__visits i:nth-child(5) { --d: 4; }
.insights-story__visits i:nth-child(6) { --d: 5; } .insights-story__visits i:nth-child(7) { --d: 6; }
.insights-story__visits i:nth-child(8) { --d: 7; } .insights-story__visits i:nth-child(9) { --d: 8; }
.insights-story__visits i:nth-child(10) { --d: 9; } .insights-story__visits i:nth-child(11) { --d: 10; }
.insights-story__visits i:nth-child(12) { --d: 11; }

/* ---- tablet: the insight moves under the pattern ------------------------- */
@media (max-width: 1179px) {
  .insights-story__study {
    --zoom: 64px;
    grid-template-columns: auto var(--zoom) minmax(0, 1fr);
    grid-template-areas: "month . pattern" "month . insight";
  }
  .insights-story__month { grid-row: 1 / span 2; width: 280px; }
  .insights-story__insight { margin-top: 28px; }
  .insights-story__insight .insights-story__beat { display: none; }
}

/* ---- phone: a vertical reading order, the bar turns horizontal ------------ */
@media (max-width: 720px) {
  .insights-story__head { margin-bottom: 44px; }
  .insights-story__intro { margin-top: 18px; font-size: 16px; }
  .insights-story__study { display: flex; flex-direction: column; align-items: stretch; }
  .insights-story__month { width: auto; }
  .insights-story__total { height: auto; margin-bottom: 22px; }
  .insights-story__figure { font-size: 40px; }
  .insights-story__band { display: flex; flex-direction: column-reverse; gap: 18px; height: auto; }
  .insights-story__bar { flex-direction: row; height: 44px; }
  .insights-story__bar span:first-child { border-radius: 12px 3px 3px 12px; }
  .insights-story__bar span:last-child { border-radius: 3px 12px 12px 3px; }
  .insights-story[data-enhanced] .insights-story__bar span { transform: scaleX(0); transform-origin: left; }
  .insights-story.is-visible .insights-story__bar span { transform: none; }
  .insights-story__legend { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline, #ffffff17); }
  .insights-story__legend li { justify-content: flex-start; min-height: 44px; border-bottom: 1px solid var(--hairline, #ffffff17); }
  .insights-story__legend span { flex: 1; font-size: 14px; }
  .insights-story__legend .is-focus span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent, #d6ff63); vertical-align: 1px; }
  .insights-story__pattern { height: auto; margin-top: 40px; padding: 22px 20px; }
  .insights-story__pattern::before { display: none; }
  .insights-story__merchants { gap: 22px; }
  .insights-story__insight { margin-top: 40px; }
  .insights-story__insight .insights-story__beat { display: flex; }
  .ai-panel { padding: 20px; border-radius: 22px; }
  .ai-panel__answer h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .insights-story *,
  .insights-story *::before { transition: none !important; animation: none !important; }
}