/* RevOps "The Forecast Gap": stage rows as a dark data card — CRM vs actual bars, gap pill, Commit highlighted. */

#forecast-gap .display-2 .accent { color: #1c5fd0; }
#forecast-gap .fg {
  margin-top: clamp(32px, 3.5vw, 48px);
  padding: 8px clamp(16px, 1.8vw, 28px) 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #172036 0%, #121a2c 100%);
  border: 1px solid rgb(255 255 255 / 6%);
  box-shadow: 0 30px 60px -34px rgb(10 18 40 / 55%);
}
#forecast-gap .fg__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(110px, .7fr) minmax(0, 2fr);
  align-items: center;
  column-gap: clamp(16px, 2vw, 32px);
  padding: 22px 12px;
  border-top: 1px solid rgb(255 255 255 / 7%);
}
#forecast-gap .fg__row--head { padding: 18px 12px 14px; border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; color: #8d97ad; }
#forecast-gap .fg__row--head div:first-child { color: #f5c842; }

#forecast-gap .fg__stage { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: #fff; }
#forecast-gap .fg__num {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #222c44; color: #aab3c7; font-size: 14px; font-weight: 600;
}
#forecast-gap .fg__cell { display: flex; flex-direction: column; gap: 9px; }
#forecast-gap .fg__val { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
#forecast-gap .fg__cell--crm .fg__val { color: #c3cadb; font-weight: 600; }
#forecast-gap .fg__bar { position: relative; display: block; height: 8px; max-width: 240px; width: 100%; border-radius: 4px; background: #252f47; overflow: hidden; }
#forecast-gap .fg__bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
#forecast-gap .fg__cell--crm .fg__bar i { background: #5a7bc4; }
#forecast-gap .fg__cell--act .fg__bar i { background: #2f7bff; }
#forecast-gap .fg.is-in .fg__bar i { transform: none; }

#forecast-gap .fg__gap {
  display: inline-grid; place-items: center; width: 112px; height: 44px; padding: 0 16px; border-radius: 10px;
  background: rgb(239 84 84 / 12%); border: 1px solid rgb(239 84 84 / 22%);
  color: #ff8a8a; font-size: 15px; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
}
#forecast-gap .fg__gap--base { background: #262f45; border-color: rgb(255 255 255 / 8%); color: #aab3c7; }
#forecast-gap .fg__why { margin: 0; font-size: 15px; line-height: 1.6; color: #98a2b8; text-wrap: pretty; }

/* Highlight: Commit by default, follows whichever row is hovered or focused. */
#forecast-gap .fg__row:not(.fg__row--head) { min-height: 104px; border: 1px solid transparent; margin: 0 -12px; padding-left: 24px; padding-right: 24px; border-radius: 12px; cursor: default; outline: none; }
/* Dividers: a hairline inset from the edges, drawn above every row except the first and either side of the highlight. */
#forecast-gap .fg__row:not(.fg__row--head)::after { content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; background: rgb(255 255 255 / 7%); transition: opacity .35s ease; }
#forecast-gap .fg__row:nth-child(2)::after, #forecast-gap .fg__row.is-hot::after, #forecast-gap .fg__row.is-hot + .fg__row::after { opacity: 0; }
/* Keyboard focus moves the highlight (inline script); no extra browser ring on click. */
#forecast-gap .fg__row:focus-visible { box-shadow: 0 0 0 2px rgb(245 200 66 / 60%); }
#forecast-gap .fg.is-in .fg__row { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1), background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
#forecast-gap .fg__num, #forecast-gap .fg__why, #forecast-gap .fg__gap { transition: background-color .35s ease, color .35s ease, border-color .35s ease, font-size .35s ease, opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
#forecast-gap .fg.is-in .fg__bar i { transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + 250ms), background-color .35s ease; }
#forecast-gap .fg__row::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #f5c842; opacity: 0; transition: opacity .35s ease; }
#forecast-gap .fg__row.is-hot::before { opacity: 1; }
#forecast-gap .fg__row.is-hot { border-color: rgb(245 200 66 / 35%); background-color: rgb(245 200 66 / 9%); }

#forecast-gap .fg__row.is-hot .fg__num { background: #f5c842; color: #141416; }
#forecast-gap .fg__row.is-hot .fg__bar i { background: #f5c842; }
#forecast-gap .fg__row.is-hot .fg__gap { background: rgb(239 84 84 / 16%); border-color: rgb(255 110 110 / 40%); }
#forecast-gap .fg__row.is-hot .fg__why { color: #e9ecf3; }

#forecast-gap .note { margin-top: 20px; }

/* Entrance: rows rise in one by one, gap pills settle after the bars, Commit glows softly. */
#forecast-gap .fg__row:not(.fg__row--head) { opacity: 0; transform: translateY(14px); transition: opacity .6s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
#forecast-gap .fg.is-in .fg__row { opacity: 1; transform: none; }
#forecast-gap .fg__bar i { transition-delay: calc(var(--d, 0ms) + 250ms); }
#forecast-gap .fg__gap { opacity: 0; transform: scale(.85); transition: opacity .4s ease calc(var(--d, 0ms) + 900ms), transform .5s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d, 0ms) + 900ms); }
#forecast-gap .fg.is-in .fg__gap { opacity: 1; transform: none; }
#forecast-gap .fg.is-in .fg__row.is-hot { animation: fgGlow 3.6s ease-in-out 1.8s infinite; }
#forecast-gap .fg__bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent); transform: translateX(-100%); }
#forecast-gap .fg.is-in .fg__bar i::after { animation: fgSheen 4.5s ease-in-out calc(var(--d, 0ms) + 1.6s) infinite; }
@keyframes fgGlow { 0%, 100% { box-shadow: 0 0 0 0 rgb(245 200 66 / 0%); } 50% { box-shadow: 0 0 28px -4px rgb(245 200 66 / 28%); } }
@keyframes fgSheen { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

@media (max-width: 1100px) {
  #forecast-gap .fg__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; row-gap: 14px; }
  #forecast-gap .fg__row--head div:last-child { display: none; }
  #forecast-gap .fg__why { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  #forecast-gap .fg__row--head { display: none; }
  #forecast-gap .fg__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #forecast-gap .fg__row:nth-child(2) { border-top: 0; }
  #forecast-gap .fg__stage { grid-column: 1 / 2; gap: 10px; font-size: 16px; white-space: nowrap; }
  #forecast-gap .fg__num { width: 32px; height: 32px; font-size: 13px; }
  #forecast-gap .fg__cell--gap { grid-column: 2; grid-row: 1; justify-self: end; }
  #forecast-gap .fg__cell--crm, #forecast-gap .fg__cell--act { grid-row: 2; }
  #forecast-gap .fg__cell--crm::before, #forecast-gap .fg__cell--act::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8d97ad; }
  #forecast-gap .fg__gap { width: auto; min-width: 84px; height: 34px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #forecast-gap .fg__bar i, #forecast-gap .fg__row, #forecast-gap .fg__gap { opacity: 1; transform: none; transition: none; }
  #forecast-gap .fg__row.is-hot, #forecast-gap .fg__gap, #forecast-gap .fg__bar i::after { animation: none !important; }
}