/* =========================================================================
   DATA ROLLUP DEMO (#dataRollupDemo).
   See src/components/DataRollupDemo.astro for the storyboard.
   Timeline: public/js/data-rollup-demo.js toggles `is-*` classes.

   A single steady scene, no crossfade — a rolled-up total expands into
   its underlying transaction rows, then collapses back, showing
   drill-down detail and high-level rollups living in one place. Same
   --xxx-* palette likeness rules as every other demo on the site.
   ========================================================================= */

.drd {
  --drd-canvas: #FAF9F5;
  --drd-card: #FFFFFF;
  --drd-border: #DBDBDE;
  --drd-line: #EAEAEA;
  --drd-ink: #2B2B2B;
  --drd-ink2: #777777;
  --drd-accent: #6A5BC6;
  --drd-green: #2C8E45;
}

.drd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--drd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.drd.is-out .drd__stage { opacity: 0; }

.drd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--drd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--drd-line);
  white-space: nowrap;
}
.drd__pane { flex: 1; min-height: 0; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }

.drd__sources { display: flex; flex-wrap: wrap; gap: 8px; }
.drdSource {
  display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; color: var(--drd-green);
  background: #E3F5E9; border-radius: 999px; padding: 3px 9px;
}
.drdSource i { width: 5px; height: 5px; border-radius: 50%; background: var(--drd-green); }

.drdRollup { background: var(--drd-card); border: 1px solid var(--drd-border); border-radius: 9px; overflow: hidden; }
.drdRollup__row {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: default;
  font-size: 11.5px; font-weight: 700; color: var(--drd-ink);
}
.drdChev { display: inline-block; font-size: 11px; color: var(--drd-ink2); transition: transform .3s ease; }
.drd.is-expanded .drdChev { transform: rotate(90deg); }
.drdRollup__label { flex: 1; }
.drdRollup__val { font-variant-numeric: tabular-nums; }

.drdDetail {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
  border-top: 0 solid var(--drd-line);
}
.drd.is-expanded .drdDetail { max-height: 200px; border-top-width: 1px; }
.drdDetail__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 13px 8px 28px; font-size: 10px; color: var(--drd-ink2); border-bottom: 1px solid var(--drd-line);
}
.drdDetail__row:last-child { border-bottom: none; }
.drdDetail__val { font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .drd__stage { aspect-ratio: auto; min-height: 380px; }
}