/* Screen-specific overrides (keyed by Figma node-id, so safe across rebuilds).
   These replicate Figma's "fixed position when scrolling" pins. */

html, body { height: 100%; overflow: hidden; }   /* page itself never scrolls */

/* Screen 1 — 53:2 (Budget Comparison) */

/* Page fills the viewport exactly; only the table panel scrolls inside it. */
[data-node-id="53:2"] {                 /* root frame */
  height: 100vh !important;
  overflow: hidden;
}
[data-node-id="53:6"] {                 /* Body (sidebar + main) fills remaining height */
  flex: 1 1 0 !important;
  min-height: 0 !important;
}
[data-node-id="53:8"] {                 /* Main Content stretches to Body height */
  align-self: stretch !important;
  min-height: 0 !important;
}
[data-node-id="58:2"] {                 /* Budget Table = the only scroll container */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* MoxCore "Turn R&M Variance" card -> sticky bottom-right of the viewport */
[data-node-id="51:230"] {
  position: fixed !important;
  z-index: 50;
  transition: opacity .22s ease, transform .22s ease;
}

/* ---- MoxCore panel: docks on the right, main panel shrinks to fit (smart-animate) ---- */
.moxcore-dock {
  align-self: stretch;          /* fills the Body height */
  flex: 0 0 0px;
  width: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition: flex-basis .35s ease, width .35s ease, margin .35s ease, opacity .3s ease;
}
.moxcore-open .moxcore-dock {
  flex: 0 0 372px;              /* Figma panel width */
  width: 372px;
  margin: 16px 16px 16px 0;    /* top/right/bottom 16px, left 0 */
  opacity: 1;
}
/* The trigger card morphs away as the panel opens */
.moxcore-open [data-node-id="51:230"] {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
}

/* ---- Full "Turn Pattern Investigation" overlay (51:1710) ---- */
.inv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);   /* 50% black */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
.inv-modal {
  --inv-scale: 1;
  width: 1560px;
  height: 938px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(var(--inv-scale) * 0.96));
  transform-origin: center center;
  opacity: 0;
  transition: transform .35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity .3s ease;
  will-change: transform;
}
/* Two stacked overlay states. The map/pins reposition under a quick fade while the
   sidebar PUSHES in from off-screen right (the dominant motion). */
.inv-state { position: absolute; inset: 0; transition: opacity .18s ease; }
.inv-state-sel { opacity: 0; pointer-events: none; }
.inv-cardopen .inv-state-full { opacity: 0; pointer-events: none; }
.inv-cardopen .inv-state-sel { opacity: 1; pointer-events: auto; }

/* Sidebar clip: width 0 -> 336 pushes the Left Column narrower; the sidebar is pinned
   to the right inside it, so it appears to slide in from off-screen right. */
.inv-sb-clip {
  align-self: stretch;
  position: relative;
  flex: 0 0 0px;
  width: 0;
  overflow: hidden;
  transition: flex-basis .4s cubic-bezier(.2,.7,.2,1), width .4s cubic-bezier(.2,.7,.2,1);
}
.inv-sb-clip > [data-node-id="89:3636"] {
  position: absolute;
  top: 0;
  right: 0;
  width: 336px;
  height: 100%;
}
.inv-cardopen .inv-sb-clip {
  flex: 0 0 336px;
  width: 336px;
}
/* While closing: hold the selected state visible so the sidebar push-out is seen,
   keep the full state hidden until the push-out finishes. */
.inv-closing .inv-state-sel { opacity: 1; pointer-events: none; }
.inv-closing .inv-state-full { opacity: 0; }
.inv-open .inv-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}
.inv-open .inv-modal {
  transform: translate(-50%, -50%) scale(var(--inv-scale));
  opacity: 1;
}


/* Report footer ("Generated by …") -> removed */
[data-node-id="58:228"] { display: none !important; }

/* Development tab (live BLDR embed) — active state mirrors the Reports tab */
.embed-tab { cursor: pointer; }
.embed-tab.dev-active { background:#fff; border-top-left-radius:4px; border-top-right-radius:4px; }
.embed-tab.dev-active p { color:#0f529e !important; font-weight:600 !important; }