/* ==========================================================================
   Vault — insights.css
   Styles specific to the insights page. Shared styles are in base.css.
   ========================================================================== */

:root {
  --shadow-md: 6px  6px  0 0 #0A0A0A;
  --shadow-xl: 14px 14px 0 0 #0A0A0A;
  --bg: #EFEFEF;
  --shadow-lg: 10px 10px 0 0 #0A0A0A;
  --shadow-sm: 4px  4px  0 0 #0A0A0A;
  --nav-active: var(--cyan);
  --nav-active-text: var(--black);
  --badge-bg: var(--cyan);
}

/* DOT-GRID BODY */
body {
  font-family: 'Outfit', sans-serif;
  color: var(--black);
  min-height: 100vh;
  padding: 20px;

  /* Dot-grid drafting board */
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* noise layer */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* Highlighter mark — like a physical yellow highlighter */
mark {
  background: var(--yellow);
  color: var(--black);
  padding: 0 3px;
  border-radius: 2px;
  font-style: inherit;
  font-weight: inherit;
}

mark.pink  { background: var(--hot-pink);      color: var(--white); }
mark.green { background: var(--neon-green);    color: var(--black); }
mark.cyan  { background: var(--electric-blue); color: var(--black); }

/* PAGE WRAPPER */
.page-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* we handle gaps manually for overlaps */
}

/* HEADER */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--black);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

.nav-pills a {
  display: inline-block;
  padding: 6px 14px;
  border: 3px solid var(--white);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: background .1s, color .1s;
}

/* SECTION SPACING HELPERS (flying papers overlap) */
.mt-24 { margin-top: 24px; }
.mt-16 { margin-top: 16px; }
.mt-neg { margin-top: -20px; }
.ml-neg { margin-left: -10px; }

/* HERO CARD — BIG REVEAL + BAR CHART */
.hero-card {
  background: var(--black);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  padding: 36px 36px 28px;
  position: relative;
  overflow: hidden;
  transform: rotate(-0.3deg);
}

/* Tape strip */
.hero-card::before {
  content: '✦ WEEKLY INSIGHT ✦ WEEKLY INSIGHT ✦ WEEKLY INSIGHT ✦ WEEKLY INSIGHT ✦ WEEKLY INSIGHT ✦';
  position: absolute;
  top: 14px; left: -10px; right: -10px;
  background: var(--hot-pink);
  color: var(--white);
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding-top: 24px;
}

@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } }

/* ── Left: Headline ── */
.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hot-pink);
  margin-bottom: 14px;
}

.hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 22px;
}

.hero-headline mark {
  display: inline;
  font-style: italic;
}

.hero-stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-pill {
  padding: 6px 16px;
  border: var(--border-3);
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-pill.p-green { background: var(--neon-green); color: var(--black); box-shadow: 3px 3px 0 0 #0A0A0A; }
.hero-pill.p-pink  { background: var(--hot-pink);   color: var(--white); box-shadow: 3px 3px 0 0 #0A0A0A; }
.hero-pill.p-cyan  { background: var(--cyan);       color: var(--black); box-shadow: 3px 3px 0 0 #0A0A0A; }

/* ── Right: CSS-Only Bar Chart ── */
.chart-label-top {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  color: var(--white);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  opacity: 0.7;
}

/*
 * CSS-ONLY FLEXBOX BAR CHART
 * Change bar height by setting --h on
 * each .bar element via style attribute:
 *   style="--h: 65%"
 */
.bar-chart {
  display: flex;
  align-items: flex-end;    /* bars grow upward from baseline */
  gap: 8px;
  height: 200px;            /* chart canvas height */
  padding-bottom: 32px;     /* room for x-axis labels */
  position: relative;
  border-left: 3px solid rgba(255,255,255,0.2);
  border-bottom: 3px solid rgba(255,255,255,0.2);
}

/* horizontal guide lines */
.bar-chart::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  bottom: 32px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0%,
      transparent calc(25% - 1px),
      rgba(255,255,255,0.07) calc(25% - 1px),
      rgba(255,255,255,0.07) 25%
    );
  pointer-events: none;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 100%;             /* fill the chart canvas */
  position: relative;
  padding-bottom: 28px;     /* label space inside col */
}

.bar {
  width: 100%;
  /* height driven by CSS custom property --h set inline */
  height: var(--h, 50%);
  border: var(--border);
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.6s cubic-bezier(.22,.61,.36,1),
              filter 0.15s;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.bar:hover { filter: brightness(1.15); }

/* value label above bar */
.bar::before {
  content: attr(data-val);
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

/* x-axis label below bar */
.bar-xlabel {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* individual bar colors */
.bar.c-green { background: var(--neon-green); }
.bar.c-pink  { background: var(--hot-pink); }
.bar.c-cyan  { background: var(--cyan); }
.bar.c-yellow{ background: var(--yellow); }
.bar.c-orange{ background: var(--orange); }
.bar.c-purple{ background: var(--purple); }
.bar.c-blue  { background: var(--electric-blue); }

/* "this week" highlight ring */
.bar.highlight { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--hot-pink); }

/* ROW: STACK BAR + VIBE CARDS */
.mid-row {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
  margin-top: 22px;
}

@media (max-width: 900px) { .mid-row { grid-template-columns: 1fr; } }

/* STACK BAR (Spending Breakdown) */
.stack-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
  transform: rotate(0.4deg);
  position: relative;
  overflow: visible; /* leader lines need space */
}

.sc-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.sc-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 28px;
}

/* The horizontal stack bar */
.stack-bar {
  display: flex;
  height: 44px;
  border: var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 52px; /* room for leader lines below */
  position: relative;
}

.seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
  cursor: pointer;
  border-right: 3px solid var(--black);
  flex-shrink: 0;
}

.seg:last-child { border-right: none; }
.seg:hover { filter: brightness(1.12); z-index: 5; }

.seg.s-green  { background: var(--neon-green); }
.seg.s-pink   { background: var(--hot-pink); }
.seg.s-yellow { background: var(--yellow); }
.seg.s-cyan   { background: var(--electric-blue); }
.seg.s-orange { background: var(--orange); }
.seg.s-purple { background: var(--purple); }

.seg-inner-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--black);
  white-space: nowrap;
  pointer-events: none;
}

.seg.s-pink .seg-inner-label,
.seg.s-orange .seg-inner-label { color: var(--white); }

/* Leader line + label below */
.seg-leader {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  width: max-content;
}

.leader-line {
  width: 2px;
  height: 18px;
  background: var(--black);
  opacity: 0.5;
}

.leader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--black);
  margin-top: -1px;
}

.leader-tag {
  margin-top: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}

/* Stack legend row */
.stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legend-dot {
  width: 12px; height: 12px;
  border: var(--border-2);
  border-radius: 2px;
  flex-shrink: 0;
}

/* VIBE COMPARISON CARDS */
.vibe-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vibe-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.vibe-card.last-month { transform: rotate(-0.7deg); background: var(--white); }
.vibe-card.this-month { transform: rotate(0.9deg);  background: var(--black); color: var(--white); margin-top: -10px; }

.vibe-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
}

.vibe-card.this-month .vibe-label { color: var(--neon-green); opacity: 1; }

.vibe-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
}

.vibe-card.this-month .vibe-amount { color: var(--neon-green); }

.vibe-sub {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.5;
  font-style: italic;
  font-family: 'DM Mono', monospace;
  margin-bottom: 0;
}

/* Giant arrow — bleeds off the edge */
.vibe-arrow {
  position: absolute;
  right: -12px;
  bottom: -20px;
  font-size: 7rem;
  line-height: 1;
  opacity: 0.22;
  font-family: 'Bebas Neue', sans-serif;
  user-select: none;
  pointer-events: none;
}

.vibe-arrow.down { color: #16A34A; opacity: 0.28; }
.vibe-arrow.up   { color: var(--hot-pink); opacity: 0.35; }

.vibe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: var(--border-3);
  border-radius: 4px;
  margin-top: 10px;
}

.badge-down { background: var(--neon-green); color: var(--black); box-shadow: 3px 3px 0 0 #0A0A0A; }
.badge-up   { background: var(--hot-pink);   color: var(--white); box-shadow: 3px 3px 0 0 #0A0A0A; }

/* BOTTOM GRID — Hall of Shame + Side Cards */
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-top: 22px;
}

@media (max-width: 900px) { .bottom-grid { grid-template-columns: 1fr; } }

/* HALL OF SHAME / FAME */
.hall-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
  transform: rotate(-0.5deg);
}

.hall-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.hall-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.35;
  margin-bottom: 24px;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px;
  border: var(--border-3);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.rank-item:nth-child(1) { background: var(--hot-pink); color: var(--white); transform: rotate(-0.4deg); box-shadow: var(--shadow-md); }
.rank-item:nth-child(2) { background: var(--yellow);   color: var(--black); transform: rotate(0.5deg);  box-shadow: var(--shadow-sm); }
.rank-item:nth-child(3) { background: var(--bg);       color: var(--black); transform: rotate(-0.3deg); box-shadow: var(--shadow-sm); }

.rank-item:hover { transform: rotate(0deg) scale(1.02) !important; box-shadow: var(--shadow-lg) !important; z-index: 10; }

/* Giant outlined rank number — behind everything */
.rank-num {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 6rem;
  line-height: 1;
  -webkit-text-stroke: 3px currentColor;
  color: transparent;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  letter-spacing: -2px;
}

.rank-icon-box {
  width: 52px; height: 52px;
  border: var(--border-3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  background: rgba(255,255,255,0.3);
  box-shadow: 3px 3px 0 0 rgba(0,0,0,0.25);
}

.rank-info { flex: 1; }

.rank-pos {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}

.rank-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.rank-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0.65;
  font-style: italic;
  margin-top: 3px;
}

.rank-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: -1px;
  line-height: 1;
  flex-shrink: 0;
}

.rank-pct-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(0,0,0,0.15);
}

.rank-pct-fill {
  height: 100%;
  background: rgba(0,0,0,0.3);
}

/* SIDE CARDS (right column) */
.side-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Prediction Card */
.predict-card {
  background: var(--neon-green);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
  transform: rotate(0.6deg);
}

.predict-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
}

.predict-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.predict-body {
  font-size: 0.82rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.8;
}

.predict-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -1px;
  margin: 10px 0 4px;
}

.predict-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Streak Card */
.streak-card {
  background: var(--black);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
  transform: rotate(-0.5deg);
  margin-top: -8px; /* slight overlap */
}

.streak-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon-green);
  margin-bottom: 8px;
}

.streak-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 14px;
}

.streak-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.streak-day {
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.45rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
}

.streak-day.good    { background: var(--neon-green); border-color: var(--neon-green); color: var(--black); }
.streak-day.bad     { background: var(--hot-pink);   border-color: var(--hot-pink);   color: var(--white); }
.streak-day.neutral { background: rgba(255,255,255,0.08); }

/* AI Tip Card */
.tip-card {
  background: var(--hot-pink);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 20px;
  transform: rotate(0.4deg);
  position: relative;
  overflow: hidden;
}

.tip-card::after {
  content: '💡';
  position: absolute;
  bottom: -10px;
  right: 10px;
  font-size: 5rem;
  opacity: 0.12;
}

.tip-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}

.tip-text {
  font-size: 0.9rem;
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  line-height: 1.5;
}

.tip-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 16px;
  background: var(--white);
  color: var(--black);
  border: var(--border-3);
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s, box-shadow 0.08s;
}

.tip-cta:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-md); }

/* SECOND BAR CHART SECTION (weekly spend trend) */
.trend-section {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}

@media (max-width: 860px) { .trend-section { grid-template-columns: 1fr; } }

.trend-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
  transform: rotate(0.3deg);
}

.trend-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  margin-bottom: 4px;
}

.trend-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.35;
  margin-bottom: 20px;
}

/* Reusable bar chart on light background */
.bar-chart.light {
  border-left-color: rgba(0,0,0,0.15);
  border-bottom-color: rgba(0,0,0,0.15);
}

.bar-chart.light::before {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0%,
    transparent calc(25% - 1px),
    rgba(0,0,0,0.05) calc(25% - 1px),
    rgba(0,0,0,0.05) 25%
  );
}

.bar-chart.light .bar::before { color: var(--black); }
.bar-chart.light .bar-xlabel  { color: rgba(0,0,0,0.4); }

/* Y-axis labels */
.y-labels {
  position: absolute;
  left: -38px;
  top: 0;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 0.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
}

.bar-chart.light .y-labels { color: rgba(0,0,0,0.3); }

/* Heatmap mini-card */
.heatmap-card {
  background: var(--yellow);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
  transform: rotate(-0.6deg);
  margin-top: 0;
}

.heatmap-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.hm-cell {
  border: var(--border-2);
  border-radius: 3px;
  padding: 8px 6px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: default;
  transition: transform 0.1s;
}

.hm-cell:hover { transform: scale(1.08); }

.hm-cell .hm-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  display: block;
  letter-spacing: -0.5px;
}

.hm-low    { background: #d4f9a0; }
.hm-mid    { background: var(--neon-green); }
.hm-high   { background: var(--orange); color: var(--white); }
.hm-extreme{ background: var(--red); color: var(--white); }

/* FOOTER */
.site-footer {
  background: var(--black);
  color: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--neon-green);
}

/* PERIOD TOGGLE */
.period-toggle {
  display: flex;
  gap: 0;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.pt-btn {
  padding: 7px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-right: 3px solid var(--black);
  background: var(--bg);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.pt-btn:last-child { border-right: none; }
.pt-btn.active, .pt-btn:hover { background: var(--black); color: var(--neon-green); }

/* STAGGER ENTRANCE ANIMATION */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--rot, 0deg)); }
}

.hero-card          { --rot: -0.3deg; animation: riseIn 0.5s ease both;       animation-delay: 0.05s; }
.stack-card         { --rot:  0.4deg; animation: riseIn 0.5s ease both;       animation-delay: 0.15s; }
.vibe-card          {                 animation: riseIn 0.5s ease both;       animation-delay: 0.20s; }
.hall-card          { --rot: -0.5deg; animation: riseIn 0.5s ease both;       animation-delay: 0.25s; }
.predict-card       { --rot:  0.6deg; animation: riseIn 0.5s ease both;       animation-delay: 0.30s; }
.streak-card        { --rot: -0.5deg; animation: riseIn 0.5s ease both;       animation-delay: 0.35s; }
.tip-card           { --rot:  0.4deg; animation: riseIn 0.5s ease both;       animation-delay: 0.40s; }
.trend-card         { --rot:  0.3deg; animation: riseIn 0.5s ease both;       animation-delay: 0.45s; }
.heatmap-card       { --rot: -0.6deg; animation: riseIn 0.5s ease both;       animation-delay: 0.50s; }

/* bar grow-up animation */
@keyframes barGrow {
  from { height: 0; }
  to   { height: var(--h, 50%); }
}

.bar { animation: barGrow 0.8s cubic-bezier(.22,.61,.36,1) both; }
.bar-col:nth-child(1) .bar { animation-delay: 0.1s; }
.bar-col:nth-child(2) .bar { animation-delay: 0.15s; }
.bar-col:nth-child(3) .bar { animation-delay: 0.20s; }
.bar-col:nth-child(4) .bar { animation-delay: 0.25s; }
.bar-col:nth-child(5) .bar { animation-delay: 0.30s; }
.bar-col:nth-child(6) .bar { animation-delay: 0.35s; }
.bar-col:nth-child(7) .bar { animation-delay: 0.40s; }
.bar-col:nth-child(8) .bar { animation-delay: 0.45s; }

/* ── Mobile ──────────────────────────────────────────────── */
.legend-pct { display: none; opacity: .6; }

@media (max-width: 700px) {
  /* flatten the tilted cards (--rot also feeds the riseIn animation) */
  .hero-card, .stack-card, .hall-card, .predict-card, .streak-card, .tip-card, .trend-card, .heatmap-card { --rot: 0deg; transform: none; }
  .hero-card { padding: 34px 16px 18px; box-shadow: 6px 6px 0 0 #0A0A0A; }
  .stack-card, .hall-card, .trend-card { padding: 20px 16px; box-shadow: 6px 6px 0 0 #0A0A0A; }
  .predict-card, .tip-card, .streak-card, .heatmap-card, .vibe-card { box-shadow: 5px 5px 0 0 #0A0A0A; }
  .streak-card, .vibe-card.this-month { margin-top: 0; }

  .hero-inner { gap: 20px; padding-top: 30px; }
  .hero-headline { font-size: 1.5rem; }
  .hero-pill { font-size: .62rem; padding: 5px 10px; }

  /* charts: room for the y-axis labels, slimmer bars and labels */
  .bar-chart { margin-left: 36px; gap: 4px; }
  .bar { border-width: 3px; }
  .bar::before { font-size: .5rem; }
  .bar-col { min-width: 0; }
  .bar-xlabel { font-size: .5rem; }

  .mid-row, .bottom-grid, .trend-section { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }

  /* stacked bar: labels can't fit, the legend carries names + % instead */
  .stack-bar { margin-bottom: 14px; }
  .seg-leader, .seg-inner-label { display: none; }
  .legend-pct { display: inline; }

  .rank-item, .rank-item:hover { transform: none !important; }
  .rank-item { padding: 12px; gap: 10px; }
  .rank-icon-box { width: 42px; height: 42px; font-size: 1.2rem; }
  .rank-name { font-size: 1.25rem; }
  .rank-amount { font-size: 1.4rem; }
  .rank-num { font-size: 4.5rem; }

  .heatmap-grid { grid-template-columns: repeat(2, 1fr); }
  .side-col { gap: 14px; }
}